import { differenceInCalendarDays } from 'date-fns';
import { Star } from 'lucide-react';

interface CountdownWidgetProps {
  event: {
    id: number;
    title: string;
    start_datetime: string;
  };
}

export default function CountdownWidget({ event }: CountdownWidgetProps) {
  const daysUntil = differenceInCalendarDays(new Date(event.start_datetime), new Date());
  if (daysUntil < 0) return null;

  const label = daysUntil === 0
    ? 'Today'
    : daysUntil === 1
      ? '1 day'
      : `${daysUntil} days`;

  return (
    <div className="flex items-center gap-2.5 px-3.5 py-2.5 rounded-lg bg-amber-500/[0.07] border border-amber-500/10">
      <Star className="h-3.5 w-3.5 text-amber-400 fill-amber-400 shrink-0" />
      <span className="text-sm text-amber-200/90 truncate">
        <span className="font-semibold tabular-nums">{label}</span>
        {daysUntil > 0 ? ' until ' : ' — '}
        <span className="font-medium text-foreground">{event.title}</span>
      </span>
    </div>
  );
}