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

type Props = {
  /** Numéro de section, format libre ("01", "I", "N°042"). Affiché en Fraunces tabular. */
  number: string;
  /** Libellé optionnel à côté du chip, en petit caps tracked. */
  label?: string;
  /** Densifie la bordure et ajoute un soft glow. Réservé aux ouvertures de fold. */
  emphasis?: boolean;
  className?: string;
};

/**
 * SectionStamp : signature visuelle « cartouche d'atelier » récurrente.
 *
 * Reprend exactement le langage du logo (chip stone-900 + bordure bronze) pour
 * créer un motif cohérent à travers le site. À utiliser à la place de Badge
 * sur les ouvertures de section éditoriales fortes.
 *
 * Exemples :
 *   <SectionStamp number="01" label="Notre méthode" />
 *   <SectionStamp number="N°042" />
 *   <SectionStamp number="03" label="Pourquoi nous" emphasis />
 */
export function SectionStamp({ number, label, emphasis = false, className }: Props) {
  return (
    <div className={cn("inline-flex items-center gap-3", className)}>
      <span
        className={cn(
          "inline-flex items-center justify-center rounded-md border bg-stone-900 px-2.5 py-1.5 min-w-[2.5rem]",
          emphasis
            ? "border-amber-800/45 shadow-[inset_0_0_0_1px_rgba(146,64,14,0.18),0_0_18px_-6px_rgba(146,64,14,0.45)]"
            : "border-amber-800/25 shadow-[inset_0_0_0_1px_rgba(146,64,14,0.10)]",
        )}
      >
        <span className="font-editorial text-sm font-medium tabular-nums text-stone-50">
          {number}
        </span>
      </span>
      {label && (
        <span className="text-xxs uppercase tracking-[0.18em] font-semibold text-text-muted">
          {label}
        </span>
      )}
    </div>
  );
}