"use client";

import { useState, useEffect } from "react";
import { TEXT } from "@/branding";

interface ResendTimerProps {
  onResend: () => void;
  initialSeconds?: number;
}

export function ResendTimer({ onResend, initialSeconds = 30 }: ResendTimerProps) {
  const [seconds, setSeconds] = useState(initialSeconds);

  useEffect(() => {
    if (seconds <= 0) return;
    const t = setTimeout(() => setSeconds((s) => s - 1), 1000);
    return () => clearTimeout(t);
  }, [seconds]);

  const handleResend = () => {
    onResend();
    setSeconds(initialSeconds);
  };

  if (seconds > 0) {
    return (
      <p className="text-xs text-center" style={{ color: "#666" }}>
        {TEXT.auth.resendIn}{" "}
        <span style={{ color: "var(--accent)" }}>
          {seconds}{TEXT.auth.seconds}
        </span>
      </p>
    );
  }

  return (
    <button
      onClick={handleResend}
      className="text-xs font-medium w-full text-center transition-opacity hover:opacity-80"
      style={{ color: "var(--accent)" }}
    >
      {TEXT.auth.resendOtp}
    </button>
  );
}