import React, { useEffect, useState } from "react";
import { useBoolean } from "usehooks-ts";

import { Button } from "@/components/ui/button/button";
import { useLocale } from "@/hooks/useLocale";

interface CountdownTimerProps {
  onResendButton: () => void;
}

const CountdownTimer: React.FC<CountdownTimerProps> = ({ onResendButton }) => {
  const initialTime = 180;
  const showResendButton = useBoolean(false);
  const [time, setTime] = useState(initialTime);
  const { t } = useLocale();
  useEffect(() => {
    const timer = setTimeout(() => {
      if (time > 0) {
        setTime(time - 1);
      } else {
        showResendButton.setTrue();
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [time, showResendButton]);

  const minutes = Math.floor(time / 60);
  const seconds = time % 60;

  return (
    <div className="flex flex-1 flex-row justify-between">
      <div className="flex items-center gap-2">
        <p className="text-xs text-gray-500">{t("Time Remaining:")}</p>
        <p className="text-base text-black">
          {String(minutes).padStart(2, "0")}:{String(seconds).padStart(2, "0")}
        </p>
      </div>

      {showResendButton.value && (
        <Button
          onClick={(e) => {
            e.preventDefault();
            setTime(initialTime);
            onResendButton();
            showResendButton.setFalse();
          }}
          className="mr-2 !p-0"
          variant="link"
        >
          {t("Send Again")}
        </Button>
      )}
    </div>
  );
};

export default CountdownTimer;