'use client'

import { useState, useEffect } from 'react'

interface CountdownProps {
  targetDate: Date
  label?: string
}

export function Countdown({ targetDate, label = "EARLY BIRD CLOSES IN" }: CountdownProps) {
  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  })

  useEffect(() => {
    const calculateTimeLeft = () => {
      const difference = targetDate.getTime() - new Date().getTime()
      
      if (difference > 0) {
        setTimeLeft({
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60),
        })
      }
    }

    calculateTimeLeft()
    const timer = setInterval(calculateTimeLeft, 1000)

    return () => clearInterval(timer)
  }, [targetDate])

  const timeBlocks = [
    { value: timeLeft.days, label: 'DAYS' },
    { value: timeLeft.hours, label: 'HRS' },
    { value: timeLeft.minutes, label: 'MIN' },
    { value: timeLeft.seconds, label: 'SEC' },
  ]

  return (
    <div className="text-center">
      <p className="font-[family-name:var(--font-quicksand)] font-medium text-[12px] text-white/55 uppercase tracking-[0.1em] mb-4">
        {label}
      </p>
      <div className="flex justify-center gap-3">
        {timeBlocks.map((block, index) => (
          <div 
            key={index} 
            className="flex flex-col items-center bg-white/10 rounded-lg px-4 py-3 md:px-5 md:py-4"
          >
            <span className="font-[family-name:var(--font-antonio)] font-bold text-[#FFF100] text-[40px] md:text-[52px] leading-none tabular-nums">
              {String(block.value).padStart(2, '0')}
            </span>
            <span className="font-[family-name:var(--font-quicksand)] font-medium text-white/50 text-[10px] uppercase mt-1">
              {block.label}
            </span>
          </div>
        ))}
      </div>
    </div>
  )
}