import type { ReactNode } from "react";

interface EmptyStateProps {
  icon?: ReactNode;
  title: string;
  description?: string;
  action?: ReactNode;
}

/** Consistent "nothing here yet" panel — replaces the ad-hoc `<p className="text-gray-600">` scattered across pages. */
export function EmptyState({ icon, title, description, action }: EmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center text-center py-12 px-6 border border-dashed border-line-strong rounded-xl">
      {icon && <div className="text-ink-muted mb-3">{icon}</div>}
      <p className="text-ink text-sm font-semibold">{title}</p>
      {description && <p className="text-ink-muted text-xs mt-1 max-w-sm">{description}</p>}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}

/** Inline error banner — for API/Firestore errors surfaced within a page section. */
export function ErrorBanner({ message }: { message: string }) {
  return (
    <div className="bg-sev-major/10 border border-sev-major/40 rounded-lg p-4">
      <p className="text-sev-major text-sm">{message}</p>
    </div>
  );
}