import { cn } from "@aur-ui/ui/lib/utils";
import type { ReactNode } from "react";

/**
 * Centered empty/error state for pages, cards, and list bodies. The icon
 * sits in a soft squircle wash (danger-tinted for error tones), copy stays
 * short, and up to two actions give the user a way forward.
 */
export function EmptyState({
  icon,
  title,
  description,
  action,
  secondaryAction,
  tone = "neutral",
  size = "default",
  className,
}: {
  icon?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  /** Primary CTA (a Button). */
  action?: ReactNode;
  secondaryAction?: ReactNode;
  tone?: "neutral" | "danger";
  /** `compact` tightens paddings for card and drawer bodies. */
  size?: "default" | "compact";
  className?: string;
}) {
  return (
    <div
      data-slot="empty-state"
      className={cn(
        "flex flex-col items-center justify-center text-center",
        size === "compact" ? "gap-2 px-4 py-8" : "gap-3 px-6 py-16",
        className,
      )}
    >
      {icon ? (
        <span
          aria-hidden
          className={cn(
            "mb-1 flex items-center justify-center rounded-overlay",
            size === "compact"
              ? "size-10 [&>svg]:size-5"
              : "size-12 [&>svg]:size-6",
            tone === "danger"
              ? "bg-danger-soft text-danger"
              : "bg-ink-wash text-ink-400",
          )}
        >
          {icon}
        </span>
      ) : null}
      <div
        className={cn(
          "font-semibold text-ink-900",
          size === "compact" ? "text-sm" : "text-base",
        )}
      >
        {title}
      </div>
      {description ? (
        <p className="max-w-sm text-sm leading-6 text-ink-500">{description}</p>
      ) : null}
      {action || secondaryAction ? (
        <div className="mt-2 flex items-center gap-2">
          {action}
          {secondaryAction}
        </div>
      ) : null}
    </div>
  );
}