import * as React from "react";
import { cn } from "@/lib/utils";

// shadcn/ui Empty composition, adapted to the project's React 18/Tailwind 3 primitives.
export function Empty({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div data-slot='empty' className={cn("flex min-w-0 flex-col items-center justify-center gap-6 rounded-lg border border-dashed border-transparent p-6 text-center md:p-8", className)} {...props} />;
}

export function EmptyHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div data-slot='empty-header' className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)} {...props} />;
}

export function EmptyMedia({ className, variant = "default", ...props }: React.HTMLAttributes<HTMLDivElement> & { variant?: "default" | "icon" }) {
  return <div data-slot='empty-media' data-variant={variant} className={cn("flex shrink-0 items-center justify-center", variant === "icon" && "h-10 w-10 rounded-lg bg-muted text-foreground [&_svg]:h-6 [&_svg]:w-6", className)} {...props} />;
}

export function EmptyTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div data-slot='empty-title' className={cn("text-lg font-medium tracking-tight", className)} {...props} />;
}

export function EmptyDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
  return <p data-slot='empty-description' className={cn("text-sm leading-relaxed text-muted-foreground", className)} {...props} />;
}

export function EmptyContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return <div data-slot='empty-content' className={cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm", className)} {...props} />;
}