import type { ReactNode } from "react";
import { toneBanner, type Tone } from "./tokens";

interface DashboardEmptyStateProps {
  icon?: ReactNode;
  message: string;
  sub?: string;
  tone?: Tone;
}

/**
 * Reusable empty / status callout used throughout dashboard sections.
 * One component replaces five copies of the same inline div pattern.
 */
export function DashboardEmptyState({
  icon,
  message,
  sub,
  tone = "default",
}: DashboardEmptyStateProps) {
  if (icon) {
    return (
      <div className={`flex flex-col items-center justify-center rounded-lg border p-6 text-sm ${toneBanner[tone]}`}>
        <span className="mb-2 opacity-60">{icon}</span>
        <span>{message}</span>
        {sub && <p className="mt-1 text-xs opacity-70">{sub}</p>}
      </div>
    );
  }
  return (
    <div className={`rounded-lg border p-3 text-sm ${toneBanner[tone]}`}>
      {message}
    </div>
  );
}
