import { Empty } from "@cloudflare/kumo/components/empty";
import { cn } from "~/utils/cn";
import { Icon, type IconName } from "~/ui/Icon";

const SIZES = {
  inline: { empty: "sm", icon: "size-5" },
  page: { empty: "lg", icon: "size-6" },
} as const;

type Props = {
  title: string;
  icon?: IconName;
  /** `page` for a whole-page empty state, `inline` (default) inside panels. */
  size?: keyof typeof SIZES;
  /** Buttons or links that get the person unstuck. */
  action?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
};

export function EmptyState({ title, icon = "inbox", size = "inline", action, className, children }: Props) {
  const sizing = SIZES[size];
  const hasContents = Boolean(children || action);
  return (
    <Empty
      size={sizing.empty}
      title={title}
      icon={<Icon name={icon} className={cn("text-kumo-subtle", sizing.icon)} />}
      className={cn("border-0 bg-transparent", className)}
      contents={
        hasContents ? (
          <div className="flex flex-col items-center gap-5">
            {children && <div className="max-w-sm text-sm leading-6 text-pretty text-kumo-subtle">{children}</div>}
            {action && <div className="flex flex-wrap justify-center gap-2">{action}</div>}
          </div>
        ) : undefined
      }
    />
  );
}