'use client';

import { useState, useEffect } from 'react';

const Timer = ({ startTime, endTime }: { startTime: string, endTime: string }) => { 
  const [elapsedTime, setElapsedTime] = useState('00:00:00');

  useEffect(() => {
    if (endTime === '') {
      const interval = setInterval(() => {
        const start = new Date(startTime).getTime();
        const now = new Date().getTime();
        const distance = Math.max(0, now - start);

        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
          .toString()
          .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
          
        setElapsedTime(formattedTime);
      }, 1000);

        return () => clearInterval(interval);
    }

    const duration = new Date(endTime).getTime() - new Date(startTime).getTime();
    const hours = Math.floor(duration / (1000 * 60 * 60));
    const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((duration % (1000 * 60)) / 1000);

    const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes
      .toString()
      .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

    setElapsedTime(formattedTime);
  }, [startTime, endTime]);

  return <p className="font-mono tabular-nums text-5xl font-bold text-black dark:text-white">{elapsedTime}</p>;
};

export default Timer;