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

/**
 * Le ◆ — gem facetté, signature de la marque.
 * SVG inline (pas une icône Lucide, jamais).
 *
 * 4 facettes suggérées + ligne médiane "table" du gem.
 * Couleur : `currentColor` — hérite du contexte. Default text-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;
  /** Si true, applique un drop-shadow doux rubis pour les héros. */
  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 200 200"
      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}
    >
      <polygon points="100,10 190,100 100,190 10,100" fill="currentColor" />
      {/* Table du gem */}
      <line x1="10" y1="100" x2="190" y2="100" stroke="rgba(255,255,255,0.55)" strokeWidth="3" />
      {/* Facettes hautes */}
      <line x1="55" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" strokeWidth="2" />
      <line x1="145" y1="55" x2="100" y2="100" stroke="rgba(255,255,255,0.4)" strokeWidth="2" />
    </svg>
  );
}
