src/components/CountdownTimer.tsx

import { useCountdown } from '@/hooks/useCountdown';

interface CountdownTimerProps {
  deadline: Date | null;
  className?: string;
}

const CountdownTimer = ({ deadline, className = "" }: CountdownTimerProps) => {
  const { days, hours, minutes, seconds, isExpired } = useCountdown(deadline);

  if (isExpired || !deadline) {
    return (
      <div className={`text-red-600 font-medium ${className}`}>
        Deadline passed
      </div>
    );
  }

  const formatNumber = (num: number) => num.toString().padStart(2, '0');

  return (
    <div className={`font-mono text-lg font-bold ${className}`}>
      <span className="text-blue-600">
        {days > 0 && `${days} day${days !== 1 ? 's' : ''} `}
        {formatNumber(hours)}h {formatNumber(minutes)}m {formatNumber(seconds)}s
      </span>
    </div>
  );
};

export default CountdownTimer;