import clsx from 'clsx';
import { useEffect, useReducer } from 'react';

type State = {
  hours: number;
  minutes: number;
  seconds: number;
};

type Action = {
  type: string;
  payload: Partial<State>;
};

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_TIME_REMAINING':
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

export function Timer({ targetDate, className }: { targetDate: Date; className?: string }) {
  const [timeRemaining, dispatch] = useReducer(reducer, {
    hours: 0,
    minutes: 0,
    seconds: 0
  });

  useEffect(() => {
    const intervalId = setInterval(() => {
      const timeDifference = targetDate.getTime() - Date.now();

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

      dispatch({
        type: 'SET_TIME_REMAINING',
        payload: { hours, minutes, seconds }
      });
    }, 1000);

    return () => clearInterval(intervalId);
  }, [targetDate]);

  return (
    <span className={clsx('', className)}>
      {timeRemaining.hours}h {timeRemaining.minutes}m {timeRemaining.seconds}s
    </span>
  );
}