import { format } from 'date-fns';
import { Calendar, Clock } 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;
}

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-2">
            {events.map((event) => (
              <div
                key={event.id}
                className="flex items-start gap-3 p-3 rounded-lg border border-transparent hover:border-border/50 hover:bg-card-elevated transition-all duration-200"
              >
                <div
                  className="w-1 h-full min-h-[2rem] rounded-full shrink-0"
                  style={{ backgroundColor: event.color || 'hsl(var(--primary))' }}
                />
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-sm">{event.title}</p>
                  {!event.all_day ? (
                    <div className="flex items-center gap-1 text-xs text-muted-foreground mt-1">
                      <Clock className="h-3 w-3" />
                      {format(new Date(event.start_datetime), 'h:mm a')}
                      {event.end_datetime && ` – ${format(new Date(event.end_datetime), 'h:mm a')}`}
                    </div>
                  ) : (
                    <p className="text-xs text-muted-foreground mt-1">All day</p>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}