import type { LucideIcon } from "@/components/ui/icons";
import { cn } from "@/lib/utils";

// ExpertiseCard : primitive partagee pour casser la repetition des cards
// expertises (audit redesign-skill : 5 composants quasi-jumeaux clones sur 3
// pages, "grille SaaS generique sous patine atelier").
//
// 3 variantes pour varier la composition d'une page a l'autre :
//   - "text"     : icone chip + h3 + p (defaut, le plus utilise)
//   - "numbered" : gros chiffre Fraunces a la place de l'icone (rythme atelier)
//   - "media"    : icone + h3 + p + zone slot a droite pour micro-image
//
// Bonnes pratiques : utiliser AU MOINS 2 variantes differentes par page pour
// eviter la grille de cards identiques. Variante "numbered" reprend le langage
// SectionStamp et fonctionne mieux pour des listes ordonnees (etapes, principes).

type Variant = "text" | "numbered" | "media";

type CommonProps = {
  /** Titre court (Fraunces 2xl). */
  title: React.ReactNode;
  /** Paragraphe descriptif. */
  text: React.ReactNode;
  /** Highlight visuel optionnel (border accent, fond accent-soft). */
  highlight?: boolean;
  className?: string;
};

type TextProps = CommonProps & {
  variant?: "text";
  icon: LucideIcon;
};

type NumberedProps = CommonProps & {
  variant: "numbered";
  /** Numero affiche en gros Fraunces tabular (ex: "01", "02"). */
  number: string;
};

type MediaProps = CommonProps & {
  variant: "media";
  icon: LucideIcon;
  /** Slot media a droite (image, mini-mockup). */
  media: React.ReactNode;
};

type Props = TextProps | NumberedProps | MediaProps;

export function ExpertiseCard(props: Props) {
  const { title, text, highlight, className } = props;
  return (
    <div
      className={cn(
        "panel relative overflow-hidden p-7 md:p-8 transition-colors duration-200",
        highlight && "border-accent/40 bg-accent-soft",
        // Hover plat (pas de gradient AI default).
        "hover:border-accent/30",
        className,
      )}
    >
      {props.variant === "numbered" ? (
        <NumberedHeader number={props.number} />
      ) : props.variant === "media" ? (
        <MediaHeader icon={props.icon} media={props.media} />
      ) : (
        <TextHeader icon={props.icon} />
      )}
      <h3 className="font-editorial mt-5 text-2xl font-medium text-text leading-tight">
        {title}
      </h3>
      <p className="mt-3 text-sm md:text-base text-text-muted leading-relaxed">
        {text}
      </p>
    </div>
  );
}

function TextHeader({ icon: Icon }: { icon: LucideIcon }) {
  return (
    <span className="inline-flex items-center justify-center size-10 rounded-md border border-border bg-stone-900/[0.03]">
      <Icon className="size-[18px] text-accent" strokeWidth={1.6} />
    </span>
  );
}

function NumberedHeader({ number }: { number: string }) {
  return (
    <span
      className="inline-flex items-baseline font-editorial text-5xl md:text-6xl font-medium tabular-nums text-accent leading-none"
      aria-hidden
    >
      {number}
    </span>
  );
}

function MediaHeader({ icon: Icon, media }: { icon: LucideIcon; media: React.ReactNode }) {
  return (
    <div className="flex items-start justify-between gap-4">
      <span className="inline-flex items-center justify-center size-10 rounded-md border border-border bg-stone-900/[0.03]">
        <Icon className="size-[18px] text-accent" strokeWidth={1.6} />
      </span>
      <div className="flex-1 max-w-[60%]">{media}</div>
    </div>
  );
}