import { FolderOpen } from "@phosphor-icons/react";
import type { ReactNode } from "react";
import { cn } from "../../lib/cn";

export function EmptyState({
  action,
  align = "start",
  className,
  description,
  eyebrow = "Nothing here yet",
  icon = <FolderOpen aria-hidden="true" weight="duotone" />,
  secondaryAction,
  title,
  tone = "neutral",
}: {
  action?: ReactNode;
  align?: "center" | "start";
  className?: string;
  description: string;
  eyebrow?: string;
  icon?: ReactNode;
  secondaryAction?: ReactNode;
  title: string;
  tone?: "neutral" | "accent" | "info";
}) {
  const toneStyles = {
    accent: "border-[var(--uhuru-border-accent)] bg-[var(--uhuru-accent-subtle)]",
    info: "border-[var(--uhuru-info-border)] bg-[var(--uhuru-info-bg)]",
    neutral: "border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-muted)]",
  };

  return (
    <div className={cn("relative flex flex-col gap-4 rounded-[var(--uhuru-radius-lg)] border px-6 py-7", toneStyles[tone], align === "center" ? "items-center text-center" : "items-start", className)}>
      <div className="grid h-12 w-12 place-items-center rounded-[var(--uhuru-radius-md)] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-default)] text-[var(--uhuru-accent-strong)] [&_svg]:h-6 [&_svg]:w-6">
        {icon}
      </div>
      <div className="flex max-w-xl flex-col gap-1.5">
        {eyebrow ? <p className="m-0 text-xs font-medium uppercase tracking-[0.16em] text-[var(--uhuru-accent-strong)]">{eyebrow}</p> : null}
        <p className="m-0 text-xl font-medium tracking-[-0.03em] text-[var(--uhuru-text-primary)]">{title}</p>
        <p className="m-0 text-sm leading-6 text-[var(--uhuru-text-secondary)]">{description}</p>
      </div>
      {action || secondaryAction ? (
        <div className={cn("flex flex-wrap gap-2", align === "center" ? "justify-center" : "justify-start")}>
          {action}
          {secondaryAction}
        </div>
      ) : null}
    </div>
  );
}