import { Fragment } from "react"
import { CircleCheckIcon } from "lucide-react"
import { cn } from "@/lib/utils"
import type { Booking } from "../schemas"

export function BookingCard({ data, className }: { data: Booking; className?: string }) {
    const rows = [
        ["Anliegen", data.anliegen],
        ["Datum", data.datum],
        ["Uhrzeit", data.uhrzeit],
        ["Personen", data.personen],
        ["Name", data.name],
        ["Kontakt", data.kontakt],
    ].filter((row): row is [string, string] => Boolean(row[1]?.trim()))

    return (
        <div className={cn("rounded-2xl border p-4 text-sm", className)}>
            <p className="flex items-center gap-2 font-medium">
                <CircleCheckIcon className="size-4 shrink-0" />
                {data.art || "Anfrage"} erfasst
            </p>
            <dl className="mt-3 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
                {rows.map(([label, value]) => (
                    <Fragment key={label}>
                        <dt className="opacity-60">{label}</dt>
                        <dd className="break-words">{value}</dd>
                    </Fragment>
                ))}
            </dl>
            <p className="mt-3 text-xs opacity-60">Demo: Live landet die Anfrage direkt im Postfach oder Kalender des Teams.</p>
        </div>
    )
}