"use client";

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

// =============================================================================
// EmptyState — Centered placeholder for empty content areas
// =============================================================================

export interface CleanEmptyStateProps {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

export function CleanEmptyState({ icon, title, description, action, className }: CleanEmptyStateProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center rounded-xl border border-dashed border-[#E5E7EB] bg-[#FAFAFA] px-6 py-12 text-center",
        className,
      )}
    >
      {icon && (
        <div className="mb-3 flex size-12 items-center justify-center rounded-xl bg-[#F3F4F6] text-[#9CA3AF]">
          <span className="[&>svg]:size-5">{icon}</span>
        </div>
      )}
      <h3 className="text-[14px] font-semibold text-[#374151]">{title}</h3>
      {description && (
        <p className="mt-1 max-w-[320px] text-[13px] leading-relaxed text-[#9CA3AF]">{description}</p>
      )}
      {action && <div className="mt-4">{action}</div>}
    </div>
  );
}