// Σ inside a softened laurel, themed via CSS variables.
// Ported from docs/design-source/socrata/project/socrates.jsx (SocratesSigil).

interface SigilProps {
  size?: number;
  mood?: "thinking" | "still";
}

export function Sigil({ size = 44, mood = "thinking" }: SigilProps) {
  return (
    <div className="sigil" style={{ width: size, height: size }}>
      <svg viewBox="0 0 64 64" width={size} height={size}>
        <defs>
          <radialGradient id="sigilGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent-soft)" stopOpacity="0.55" />
            <stop offset="100%" stopColor="var(--accent-soft)" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="32" cy="32" r="30" fill="url(#sigilGlow)" />
        <circle cx="32" cy="32" r="22" fill="var(--surface-2)" stroke="var(--accent)" strokeWidth="1.25" />
        {/* Laurel */}
        <path d="M 12 32 Q 18 18 32 14" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
        <path d="M 52 32 Q 46 46 32 50" fill="none" stroke="var(--accent)" strokeWidth="1" opacity="0.45" />
        {/* Σ */}
        <text
          x="32"
          y="40"
          textAnchor="middle"
          fontSize="22"
          fontFamily="var(--font-display)"
          fontWeight="600"
          fill="var(--accent)"
        >
          Σ
        </text>
        {mood === "thinking" && (
          <circle cx="50" cy="50" r="3" fill="var(--accent)" className="sigil-pulse" />
        )}
      </svg>
    </div>
  );
}