import { forwardRef } from "react";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * Chip — pastille sélectionnable. Utilisée pour :
 *  - les filtres de la liste de factures
 *  - les choix de volume mensuel à l'onboarding
 *  - les tonalités de relance dans l'éditeur de plan
 *
 * Forme légèrement allongée (radius 999px = pill), bordure 1px.
 * Sélectionnée : fond rubis-glow + texte rubis-deep + ✓ — pas de plein rubis
 * (on garde le rubis pour les CTA, cf. règle d'or de la marque).
 */
export type ChipProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  selected?: boolean;
  /** Affiche le ✓ quand sélectionné. Default true. */
  withCheck?: boolean;
};

export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
  ({ className, selected = false, withCheck = true, children, type = "button", ...props }, ref) => {
    return (
      <button
        ref={ref}
        type={type}
        aria-pressed={selected}
        className={cn(
          "inline-flex items-center gap-1.5 rounded-full border px-3.5 py-1.5",
          "font-sans text-[13px] font-medium",
          "transition-[background,border-color,color] duration-150",
          "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-rubis-glow",
          selected
            ? "border-rubis bg-rubis-glow text-rubis-deep"
            : "border-line bg-cream-2 text-ink-2 hover:border-ink-3 hover:text-ink",
          className,
        )}
        {...props}
      >
        {selected && withCheck && <Check size={13} aria-hidden="true" />}
        {children}
      </button>
    );
  },
);
Chip.displayName = "Chip";
