'use client';

import * as React from 'react';
import { cn } from '../../lib/utils';

export interface CountdownTimerProps extends React.HTMLAttributes<HTMLDivElement> {
  targetDate: string | Date;
  onComplete?: () => void;
  showDays?: boolean;
  showHours?: boolean;
  showMinutes?: boolean;
  showSeconds?: boolean;
  compact?: boolean;
}

interface TimeRemaining {
  days: number;
  hours: number;
  minutes: number;
  seconds: number;
  total: number;
}

const calculateTimeRemaining = (targetDate: Date): TimeRemaining => {
  const total = targetDate.getTime() - new Date().getTime();

  if (total <= 0) {
    return { days: 0, hours: 0, minutes: 0, seconds: 0, total: 0 };
  }

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

  return { days, hours, minutes, seconds, total };
};

function CountdownTimer({
  targetDate,
  onComplete,
  showDays = true,
  showHours = true,
  showMinutes = true,
  showSeconds = true,
  compact = false,
  className,
  ...props
}: CountdownTimerProps) {
  const [timeRemaining, setTimeRemaining] = React.useState<TimeRemaining>(() =>
    calculateTimeRemaining(new Date(targetDate))
  );

  React.useEffect(() => {
    const target = new Date(targetDate);

    const interval = setInterval(() => {
      const remaining = calculateTimeRemaining(target);
      setTimeRemaining(remaining);

      if (remaining.total <= 0) {
        clearInterval(interval);
        onComplete?.();
      }
    }, 1000);

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

  if (timeRemaining.total <= 0) {
    return (
      <div className={cn('text-sm font-semibold text-foreground/50', className)} {...props}>
        Closed
      </div>
    );
  }

  if (compact) {
    const parts: string[] = [];
    if (showDays && timeRemaining.days > 0) parts.push(`${timeRemaining.days}d`);
    if (showHours && (timeRemaining.hours > 0 || timeRemaining.days > 0)) parts.push(`${timeRemaining.hours}h`);
    if (showMinutes) parts.push(`${timeRemaining.minutes}m`);
    if (showSeconds) parts.push(`${timeRemaining.seconds}s`);

    return (
      <div className={cn('text-sm font-semibold', className)} {...props}>
        {parts.join(' ')}
      </div>
    );
  }

  return (
    <div className={cn('flex items-center gap-2', className)} {...props}>
      {showDays && timeRemaining.days > 0 && (
        <div className="flex flex-col items-center">
          <span className="text-2xl font-bold">{String(timeRemaining.days).padStart(2, '0')}</span>
          <span className="text-xs text-foreground/50">days</span>
        </div>
      )}
      {showHours && (timeRemaining.hours > 0 || timeRemaining.days > 0) && (
        <>
          {showDays && timeRemaining.days > 0 && <span className="text-xl font-bold text-foreground/30">:</span>}
          <div className="flex flex-col items-center">
            <span className="text-2xl font-bold">{String(timeRemaining.hours).padStart(2, '0')}</span>
            <span className="text-xs text-foreground/50">hours</span>
          </div>
        </>
      )}
      {showMinutes && (
        <>
          {(showHours || showDays) && <span className="text-xl font-bold text-foreground/30">:</span>}
          <div className="flex flex-col items-center">
            <span className="text-2xl font-bold">{String(timeRemaining.minutes).padStart(2, '0')}</span>
            <span className="text-xs text-foreground/50">min</span>
          </div>
        </>
      )}
      {showSeconds && (
        <>
          {showMinutes && <span className="text-xl font-bold text-foreground/30">:</span>}
          <div className="flex flex-col items-center">
            <span className="text-2xl font-bold">{String(timeRemaining.seconds).padStart(2, '0')}</span>
            <span className="text-xs text-foreground/50">sec</span>
          </div>
        </>
      )}
    </div>
  );
}

export { CountdownTimer };
Countdown Timer

Installation

Usage
