Empty state

import * as React from "react";
import { CloudOff, FileQuestion, Inbox, ServerCrash, ShieldAlert, Timer, Wrench } from "lucide-react";
import { cn } from "@/lib/utils";

const presets = {
  empty: { icon: <Inbox />, title: "Nothing here yet" },
  search: { icon: <FileQuestion />, title: "No results" },
  error: { icon: <ServerCrash />, title: "Something went wrong" },
  offline: { icon: <CloudOff />, title: "You're offline" },
  forbidden: { icon: <ShieldAlert />, title: "You don't have access" },
  maintenance: { icon: <Wrench />, title: "Down for maintenance" },
  "rate-limit": { icon: <Timer />, title: "Too many requests" },
} as const;

export interface EmptyStateProps {
  variant?: keyof typeof presets;
  icon?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
  action?: React.ReactNode;
  /** Draw a dashed border around it, for empty panels. */
  bordered?: boolean;
  className?: string;
}

/** Empty, error, offline, maintenance and rate-limit states with one API. */
export function EmptyState({ variant = "empty", icon, title, description, action, bordered, className }: EmptyStateProps) {
  const p = presets[variant];
  return (
    <div
      role={variant === "error" || variant === "offline" ? "alert" : undefined}
      className={cn("flex flex-col items-center justify-center px-6 py-12 text-center", bordered && "rounded-lg border border-dashed border-border", className)}
    >
      <span className={cn("mb-4 grid size-11 place-items-center rounded-lg border border-border bg-card text-muted-foreground shadow-elev-1 [&_svg]:size-5", variant === "error" && "text-destructive")}>
        {icon ?? p.icon}
      </span>
      <p className="font-medium">{title ?? p.title}</p>
      {description && <p className="mt-1 max-w-sm text-sm text-muted-foreground">{description}</p>}
      {action && <div className="mt-5 flex flex-wrap justify-center gap-2">{action}</div>}
    </div>
  );
}