import React, { useId } from "react";

export type ThinkingGlyphProps = {
  label: string;
  lightCenter?: number;
  lightStrength?: number;
};

const glyphStyle = {
  x: 45.5,
  baseline: 39,
  fontSize: 18,
  fontWeight: 400,
  gray: 107,
  lightHalfWidth: 18,
};

export function ThinkingGlyph({
  label,
  lightCenter = 0,
  lightStrength = 0,
}: ThinkingGlyphProps) {
  const gradientId = `thinking-glyph-light-${useId().replace(/:/g, "")}`;
  const strength = Number.isFinite(lightStrength)
    ? Math.max(0, Math.min(1, lightStrength))
    : 0;
  const hasLight =
    Number.isFinite(lightCenter) && lightCenter !== 0 && strength > 0;
  const gray = `rgb(${glyphStyle.gray}, ${glyphStyle.gray}, ${glyphStyle.gray})`;
  const lightGray = Math.round(
    glyphStyle.gray + (255 - glyphStyle.gray) * strength,
  );
  const light = `rgb(${lightGray}, ${lightGray}, ${lightGray})`;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={940}
      height={125}
      viewBox="0 0 940 125"
      role="img"
      aria-label={label}
    >
      <rect x={0} y={0} width={940} height={125} fill="#ffffff" />
      {hasLight && (
        <defs>
          <linearGradient
            id={gradientId}
            gradientUnits="userSpaceOnUse"
            x1={lightCenter - glyphStyle.lightHalfWidth}
            y1={0}
            x2={lightCenter + glyphStyle.lightHalfWidth}
            y2={0}
            spreadMethod="pad"
            colorInterpolation="sRGB"
          >
            <stop offset="0%" stopColor={gray} />
            <stop offset="50%" stopColor={light} />
            <stop offset="100%" stopColor={gray} />
          </linearGradient>
        </defs>
      )}
      <text
        x={glyphStyle.x}
        y={glyphStyle.baseline}
        fontFamily="Geist"
        fontSize={glyphStyle.fontSize}
        fontWeight={glyphStyle.fontWeight}
        fontStyle="normal"
        letterSpacing={0}
        textAnchor="start"
        dominantBaseline="alphabetic"
        fill={hasLight ? `url(#${gradientId})` : gray}
        style={{ fontSynthesis: "none" }}
      >
        {label}
      </text>
    </svg>
  );
}