"use client";

/**
 * EmptyState — friendly empty surface used wherever a list/table
 * has no rows yet. Picks an icon, a one-line headline, and a soft
 * help paragraph; optional CTA on the right.
 */

import type { ReactNode } from "react";
import type { LucideIcon } from "lucide-react";

interface Props {
  icon?: LucideIcon;
  title: string;
  description?: string;
  action?: ReactNode;
  /** When true, render full-card height with centered vertical layout. */
  full?: boolean;
}

export function EmptyState({ icon: Icon, title, description, action, full = false }: Props) {
  return (
    <div className={`flex flex-col items-center text-center ${full ? "py-16" : "py-10"} px-6`}>
      {Icon && (
        <span className="w-12 h-12 rounded-2xl bg-slate-100 text-slate-400 flex items-center justify-center mb-3">
          <Icon className="w-5 h-5" />
        </span>
      )}
      <p className="text-sm font-semibold text-slate-700">{title}</p>
      {description && (
        <p className="text-xs text-slate-500 mt-1 max-w-sm leading-relaxed">{description}</p>
      )}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}
