"use client";

import { AlertTriangle } from "lucide-react";
import { format } from "date-fns";
import { de } from "date-fns/locale";
import type { RsvpEventDto } from "@/lib/rsvp";
import { RsvpDialog } from "@/components/rsvp-form";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";

export function RsvpActionCard({ events }: { events: RsvpEventDto[] }) {
  if (events.length === 0) return null;
  return (
    <Card className="mb-5 border-[var(--warn)] bg-[var(--warn-soft)]">
      <CardHeader>
        <CardTitle className="flex items-center gap-2 text-lg">
          <AlertTriangle className="h-5 w-5 text-[var(--warn)]" />
          Rückmeldung erforderlich
        </CardTitle>
        <CardDescription>
          Für diese Termine fehlt noch eine Antwort eurer Familie.
        </CardDescription>
      </CardHeader>
      <CardContent className="grid gap-3">
        {events.map((event) => (
          <div
            key={event.id}
            className="flex flex-col gap-3 rounded-lg border border-[var(--hairline)] bg-[var(--surface)] p-4 sm:flex-row sm:items-center sm:justify-between"
          >
            <div>
              <p className="font-medium">{event.title}</p>
              <p className="mt-1 text-sm text-[var(--ink-soft)]">
                Rückmeldung bis{" "}
                {format(
                  new Date(event.rsvpDeadline ?? event.startDate),
                  "dd.MM.yyyy HH:mm",
                  { locale: de },
                )}
              </p>
            </div>
            <RsvpDialog event={event} />
          </div>
        ))}
      </CardContent>
    </Card>
  );
}