import { format } from 'date-fns';
import { Calendar } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

interface DashboardEvent {
  id: number;
  title: string;
  start_datetime: string;
  end_datetime: string;
  all_day: boolean;
  color?: string;
  is_starred?: boolean;
}

interface CalendarWidgetProps {
  events: DashboardEvent[];
}

export default function CalendarWidget({ events }: CalendarWidgetProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <div className="p-1.5 rounded-md bg-purple-500/10">
            <Calendar className="h-4 w-4 text-purple-400" />
          </div>
          Today's Events
        </CardTitle>
      </CardHeader>
      <CardContent>
        {events.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-6">
            No events today
          </p>
        ) : (
          <div className="space-y-0.5">
            {events.map((event) => (
              <div
                key={event.id}
                className="flex items-center gap-2 py-1.5 px-2 rounded-md hover:bg-card-elevated transition-colors duration-150"
              >
                <div
                  className="w-1.5 h-1.5 rounded-full shrink-0"
                  style={{ backgroundColor: event.color || 'hsl(var(--primary))' }}
                />
                <span className="text-[11px] text-muted-foreground shrink-0 whitespace-nowrap tabular-nums">
                  {event.all_day
                    ? 'All day'
                    : `${format(new Date(event.start_datetime), 'h:mm a')} – ${format(new Date(event.end_datetime), 'h:mm a')}`}
                </span>
                <span className="text-sm font-medium truncate">{event.title}</span>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}