"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/**
 * Seven screens rendered a bare centred string for "nothing here" and two had
 * a real designed state. This is the designed one, made reusable.
 */
export function EmptyState({
  icon: Icon,
  title,
  body,
  action,
  tone = "neutral",
  className,
}: {
  icon?: React.ComponentType<{ className?: string }>;
  title: string;
  body?: React.ReactNode;
  action?: React.ReactNode;
  tone?: "neutral" | "err";
  className?: string;
}) {
  return (
    <div className={cn("flex flex-col items-center px-6 py-14 text-center", className)}>
      {Icon && (
        <div
          className={cn(
            "mb-4 grid h-12 w-12 place-items-center rounded-panel border",
            tone === "err"
              ? "border-err/35 bg-err/10 text-err"
              : "border-edge bg-[var(--surface-2)] text-mute",
          )}
        >
          <Icon className="h-5 w-5" />
        </div>
      )}
      <h3 className={cn("text-headline", tone === "err" && "text-err")}>{title}</h3>
      {body && <p className="mt-1.5 max-w-[42ch] text-callout text-dim">{body}</p>}
      {action && <div className="mt-5">{action}</div>}
    </div>
  );
}