import { useState, useEffect } from "react";
import { useTranslations } from "@/hooks/translations";
import styles from "./styles.module.css";

type CountdownProps = {
  start: number;
  className?: string;
  timeClassName?: string;
};

function Countdown({
  start,
  className,
  timeClassName,
}: CountdownProps): JSX.Element {
  const { translate } = useTranslations();
  const [time, setTime] = useState(start * 60 - 1);
  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;
    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
  };

  useEffect(() => {
    if (time === 0) return;
    const timer = setTimeout(() => setTime(time - 1), 1000);
    return () => clearTimeout(timer);
  }, [time]);

  return (
    <div className={`${styles.countdown} mb-24 ${className || ""}`}>
      <p>
        {translate("reserved_for")}
        <span className={`${timeClassName || ""}`}>{formatTime(time)}</span>
      </p>
    </div>
  );
}

export default Countdown;
