import type { HTMLAttributes, ReactNode } from "react";
import { cx } from "./utils";
import { IconBlock, type IconBlockProps } from "./IconBlock";
import type { IconName } from "./Icon";

export type EmptyStateProps = HTMLAttributes<HTMLDivElement> & {
  /** Icône Remix à afficher dans un IconBlock. */
  icon?: IconName;
  /** Couleur de l'IconBlock. */
  iconColor?: IconBlockProps["color"];
  title: ReactNode;
  description?: ReactNode;
  /** Action principale (bouton, lien, etc.) */
  action?: ReactNode;
  /** Actions secondaires (lien doc, contact support…) */
  secondaryAction?: ReactNode;
  /** Variant compacte pour intégration dans un Card */
  compact?: boolean;
};

/**
 * EmptyState — état vide standardisé.
 *
 * Cas d'usage : table vide, recherche sans résultat, espace
 * non encore configuré, fonctionnalité en cours d'arrivée.
 *
 * UX : toujours un *next step* clair (action) — jamais juste "rien".
 */
export function EmptyState({
  icon = "search-2-line",
  iconColor = "neutral",
  title,
  description,
  action,
  secondaryAction,
  compact,
  className,
  ...rest
}: EmptyStateProps) {
  return (
    <div
      className={cx("mmg-empty", compact && "mmg-empty--compact", className)}
      role="status"
      {...rest}
    >
      <IconBlock
        icon={icon}
        color={iconColor}
        size={compact ? "md" : "xl"}
      />
      <h3 className="mmg-empty__title">{title}</h3>
      {description && <p className="mmg-empty__desc">{description}</p>}
      {(action || secondaryAction) && (
        <div className="mmg-empty__actions">
          {action}
          {secondaryAction}
        </div>
      )}
    </div>
  );
}