EmptyState

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { Button } from "@/components/ledger/button";
import { InfoTip } from "@/components/ledger/info-tip";
import { type IsometricScene, IsometricSpot } from "@/components/ledger/isometric-spot";

export interface EmptyStateProps extends React.ComponentPropsWithoutRef<"div"> {
  actionLabel: string;
  /** One short line. Anything longer than a line belongs in `detail`. */
  description?: string;
  /**
   * The particulars — which three filters are active, what the setup actually
   * does — behind the ⓘ beside the title. An empty state is read at a glance;
   * the person who wants the specifics will ask for them.
   */
  detail?: React.ReactNode;
  onAction?: () => void;
  scene?: IsometricScene;
  title: string;
  /** Three genuinely different components sharing one shell. */
  variant?: "first-run" | "filtered" | "period";
}

/**
 * Always exactly one clear next action. An empty state with no action is a
 * dead end.
 *
 * No illustration on `filtered` — the user knows exactly what happened and
 * wants the fix, not a picture.
 */
export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
  (
    {
      className,
      variant = "first-run",
      title,
      description,
      detail,
      actionLabel,
      onAction,
      scene = "ledger",
      ...props
    },
    ref,
  ) => (
    <div
      className={cn("flex flex-col items-center justify-center gap-4 px-6 py-16 text-center", className)}
      ref={ref}
      {...props}
    >
      {variant === "first-run" ? <IsometricSpot scene={scene} size="spot" /> : null}
      <div className="max-w-[340px] space-y-1.5">
        <p className="text-title-sm font-medium">
          {title}
          {detail ? (
            <InfoTip
              about={`More about: ${title}`}
              className="text-left"
              triggerClassName="ml-1.5 align-[-1px]"
            >
              {detail}
            </InfoTip>
          ) : null}
        </p>
        {description ? <p className="text-body text-text-secondary">{description}</p> : null}
      </div>
      <Button onClick={onAction} variant={variant === "first-run" ? "primary" : "secondary"}>
        {actionLabel}
      </Button>
    </div>
  ),
);
EmptyState.displayName = "EmptyState";