ConfirmationCard

1"use client"
2 
3import { Badge } from "@/components/ui/badge"
4import { Button } from "@/components/ui/button"
5import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
6import { cn } from "@/lib/utils"
7 
8export type ConfirmationVariant = "default" | "warning" | "destructive"
9 
10export type ConfirmationCardProps = {
11  id: string
12  title: string
13  description: string
14  confirmLabel?: string
15  cancelLabel?: string
16  variant?: ConfirmationVariant
17  details?: string[]
18  isLoading?: boolean
19  isDisabled?: boolean
20  error?: {
21    title: string
22    description?: string
23  }
24  onConfirm?: (confirmation: { id: string; label: string }) => void
25  onCancel?: (confirmation: { id: string; label: string }) => void
26}
27 
28export function ConfirmationCard({
29  id,
30  title,
31  description,
32  confirmLabel = "Confirm",
33  cancelLabel = "Cancel",
34  variant = "default",
35  details = [],
36  isLoading,
37  isDisabled,
38  error,
39  onConfirm,
40  onCancel,
41}: ConfirmationCardProps) {
42  const isDestructive = variant === "destructive"
43 
44  return (
45    <Card className="w-full max-w-xl" data-fable-ui="confirmation-card" aria-busy={isLoading || undefined}>
46      <CardHeader>
47        <div className="flex items-start justify-between gap-3">
48          <div className="flex flex-col gap-1">
49            <CardTitle className="text-base">{title || "Confirm action"}</CardTitle>
50            <CardDescription>{description}</CardDescription>
51          </div>
52          <Badge variant={isDestructive ? "destructive" : "secondary"}>{variant}</Badge>
53        </div>
54      </CardHeader>
55      <CardContent className="flex flex-col gap-3">
56        {isLoading ? <p className="text-sm text-muted-foreground">Preparing confirmation...</p> : null}
57        {error ? (
58          <div className="rounded-md border border-destructive/20 bg-destructive/5 p-3">
59            <p className="text-sm font-medium text-destructive">{error.title}</p>
60            {error.description ? <p className="text-sm text-muted-foreground">{error.description}</p> : null}
61          </div>
62        ) : null}
63        {details.length > 0 ? (
64          <ul className="flex flex-col gap-2 text-sm text-muted-foreground">
65            {details.map((detail) => (
66              <li key={detail} className="rounded-md bg-muted px-3 py-2">
67                {detail}
68              </li>
69            ))}
70          </ul>
71        ) : null}
72      </CardContent>
73      <CardFooter className="justify-end gap-2">
74// … truncated