import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
import AdminButton from "./AdminButton";

interface AdminEmptyStateProps {
  title: string;
  description?: string;
  icon?: IconDefinition;
  action?: {
    label: string;
    onClick: () => void;
  };
}

export default function AdminEmptyState({
  title,
  description,
  icon,
  action,
}: AdminEmptyStateProps) {
  return (
    <div className="flex flex-col items-center justify-center px-4 py-12 text-center">
      {icon && (
        <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-slate-800 bg-slate-900 text-slate-500">
          <FontAwesomeIcon icon={icon} className="h-5 w-5" />
        </div>
      )}
      <h3 className="mb-1 text-base font-semibold text-slate-100">{title}</h3>
      {description && (
        <p className="mb-6 max-w-md text-sm text-slate-400">{description}</p>
      )}
      {action && (
        <AdminButton variant="primary" onClick={action.onClick}>
          {action.label}
        </AdminButton>
      )}
    </div>
  );
}
