blockchain/apps/portal/components/ui/empty-state.tsx

import type { ReactNode } from "react";

import { cn } from "@/lib/utils";

/**
 * Calm empty / blocked / offline message for portal pages.
 */
export function EmptyState({
  title,
  description,
  action,
  className,
  tone = "default",
}: {
  title: string;
  description: string;
  action?: ReactNode;
  className?: string;
  tone?: "default" | "warning" | "ok";
}) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center rounded-xl border border-border bg-card/40 px-5 py-10 text-center sm:px-8",
        className,
      )}
      role="status"
    >
      <p
        className={cn(
          "text-sm font-medium",
          tone === "warning" && "text-pending",
          tone === "ok" && "text-proof",
          tone === "default" && "text-muted-foreground",
        )}
      >
        {title}
      </p>
      <p className="mt-2 max-w-md text-sm leading-relaxed text-muted-foreground">
        {description}
      </p>
      {action ? <div className="mt-5 flex flex-wrap justify-center gap-2">{action}</div> : null}
    </div>
  );
}