import { AlertTriangle, Database, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

export function DataState({
    kind,
    title,
    description,
    actionLabel,
    onAction,
    className,
}: {
    kind: "empty" | "error";
    title: string;
    description: string;
    actionLabel?: string;
    onAction?: () => void;
    className?: string;
}) {
    const Icon = kind === "error" ? AlertTriangle : Database;

    return (
        <Card
            className={cn(
                "border-border/70 bg-card/90 shadow-xs",
                kind === "error" && "border-destructive/25 bg-destructive/5",
                className,
            )}
        >
            <CardContent className="flex min-h-44 flex-col items-center justify-center px-6 py-8 text-center">
                <div
                    className={cn(
                        "mb-3 flex size-10 items-center justify-center rounded-xl border",
                        kind === "error"
                            ? "border-destructive/20 bg-destructive/10 text-destructive"
                            : "border-primary/15 bg-primary/10 text-primary",
                    )}
                >
                    <Icon className="size-5" aria-hidden="true" />
                </div>
                <h3 className="text-sm font-semibold text-foreground">{title}</h3>
                <p className="mt-1 max-w-md text-xs leading-5 text-muted-foreground">
                    {description}
                </p>
                {actionLabel && onAction ? (
                    <Button className="mt-4" variant="outline" size="sm" onClick={onAction}>
                        <RefreshCw className="mr-2 size-3.5" />
                        {actionLabel}
                    </Button>
                ) : null}
            </CardContent>
        </Card>
    );
}