import * as React from "react";
import { Inbox } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

type EmptyStateProps = {
  /** All-caps instrument label, e.g. "Claims · inbox idle". */
  eyebrow?: string;
  /** One-line plain-language message. No apologetic language. */
  message: string;
  /** Optional action surfaced as a small outline button. */
  action?: { label: string; onClick: () => void };
  /** Override the default inbox icon. */
  icon?: React.ReactNode;
  className?: string;
};

/**
 * Empty surface state.
 * Voice: instrument-label eyebrow + a one-line message + optional action.
 * Quiet. Hairline. No apology copy.
 */
export function EmptyState({
  eyebrow,
  message,
  action,
  icon,
  className,
}: EmptyStateProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center gap-2.5 py-16 text-center",
        className,
      )}
    >
      <div
        aria-hidden
        className="relative h-10 w-10 rounded-full ring-1 ring-inset ring-border/60 bg-muted/30 flex items-center justify-center text-muted-foreground"
      >
        <div className="absolute inset-0 rounded-full ring-1 ring-inset ring-accent/10" />
        {icon ?? <Inbox className="h-4 w-4" strokeWidth={1.5} />}
      </div>
      {eyebrow ? (
        <div className="eyebrow">{eyebrow}</div>
      ) : null}
      <div className="text-sm text-muted-foreground/80 max-w-sm">
        {message}
      </div>
      {action ? (
        <Button
          variant="outline"
          size="sm"
          onClick={action.onClick}
          className="mt-1.5"
        >
          {action.label}
        </Button>
      ) : null}
    </div>
  );
}
