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

/**
 * Le ◆ — gem facetté, signature de la marque.
 *
 * Construction : losange divisé en 4 facettes triangulaires qui se rencontrent
 * au centre. Chacune a une opacité différente pour suggérer le jeu de lumière
 * d'une pierre taillée, sans gradient (qui rend pâteux à petite taille).
 *
 *   - facette haut-gauche  : 100% (lumière)
 *   - facette haut-droite  : 80%
 *   - facette bas-gauche   : 65%
 *   - facette bas-droite   : 48% (zone d'ombre)
 *
 * Plus un fin contour qui définit le pourtour. Le tout en `currentColor` —
 * hérite du parent (default rubis).
 *
 * Cf. /docs/marque.md §2 (logo direction A) et §5 (icônes spéciales).
 */
type GemProps = {
  /** Taille en pixels (carré). Default 22. */
  size?: number;
  /** Drop-shadow doux rubis — pour les usages héros uniquement. */
  glow?: boolean;
  className?: string;
  "aria-label"?: string;
};

export function Gem({ size = 22, glow = false, className, ...props }: GemProps) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      xmlns="http://www.w3.org/2000/svg"
      className={cn(
        "text-rubis shrink-0",
        glow && "[filter:drop-shadow(0_4px_8px_rgba(159,18,57,0.3))]",
        className,
      )}
      role={props["aria-label"] ? "img" : "presentation"}
      aria-hidden={props["aria-label"] ? undefined : "true"}
      {...props}
    >
      {/* Facette haut-gauche — la plus claire (côté lumière). */}
      <polygon
        points="50,6 6,50 50,50"
        fill="currentColor"
        fillOpacity="1"
      />
      {/* Facette haut-droite */}
      <polygon
        points="50,6 94,50 50,50"
        fill="currentColor"
        fillOpacity="0.8"
      />
      {/* Facette bas-gauche */}
      <polygon
        points="6,50 50,50 50,94"
        fill="currentColor"
        fillOpacity="0.65"
      />
      {/* Facette bas-droite — la plus sombre (côté ombre). */}
      <polygon
        points="50,50 94,50 50,94"
        fill="currentColor"
        fillOpacity="0.48"
      />
      {/* Contour propre — épaisseur fixe pour rester lisible à 14px. */}
      <polygon
        points="50,6 94,50 50,94 6,50"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinejoin="round"
      />
    </svg>
  );
}
