import { useCountdown } from "@/hooks/use-countdown";
import { Card, CardContent } from "@/components/ui/card";

export default function Countdown() {
  const timeLeft = useCountdown();

  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-2xl mx-auto">
      {Object.entries(timeLeft).map(([unit, value]) => (
        <Card key={unit}>
          <CardContent className="p-4 text-center">
            <span className="text-3xl font-bold block">
              {value.toString().padStart(2, '0')}
            </span>
            <span className="text-sm text-muted-foreground capitalize">
              {unit}
            </span>
          </CardContent>
        </Card>
      ))}
    </div>
  );
}
