// Single Eye component — renders an SVG eye that tracks a target point.
// Pure presentational; takes already-computed iris offset + lid state.

const Eye = React.memo(function Eye({
  size,
  irisColor,
  scleraColor,
  pupilColor,
  irisDx,
  irisDy,
  lid, // 0 = fully open, 1 = fully closed
  highlightStyle = 'dot',
}) {
  // Geometry — viewBox is 100 wide, 60 tall (almond shape)
  const cx = 50;
  const cy = 30;
  const irisR = 14;
  const pupilR = 6.5;

  // Lid covers from top + bottom toward center; max coverage = full close
  const lidCover = lid * 30; // each lid moves up to 30 units

  return (
    <svg
      width={size}
      height={size * 0.6}
      viewBox="0 0 100 60"
      style={{ display: 'block', overflow: 'visible' }}
    >
      <defs>
        <clipPath id={`eye-clip-${size}-${irisColor}`}>
          {/* Almond/lens shape */}
          <path d="M 4 30 Q 50 -2 96 30 Q 50 62 4 30 Z" />
        </clipPath>
      </defs>

      {/* Sclera (eye white) */}
      <path
        d="M 4 30 Q 50 -2 96 30 Q 50 62 4 30 Z"
        fill={scleraColor}
      />

      {/* Iris + pupil clipped to the almond */}
      <g clipPath={`url(#eye-clip-${size}-${irisColor})`}>
        <circle
          cx={cx + irisDx}
          cy={cy + irisDy}
          r={irisR}
          fill={irisColor}
        />
        <circle
          cx={cx + irisDx}
          cy={cy + irisDy}
          r={pupilR}
          fill={pupilColor}
        />
        {/* Specular highlight — fixed, doesn't track */}
        {highlightStyle === 'dot' && (
          <circle
            cx={cx + irisDx - 3.5}
            cy={cy + irisDy - 3.5}
            r={1.6}
            fill="#ffffff"
            opacity={0.95}
          />
        )}
      </g>

      {/* Eyelids — two rects that close from top and bottom */}
      {lid > 0 && (
        <g clipPath={`url(#eye-clip-${size}-${irisColor})`}>
          <rect x={0} y={0} width={100} height={lidCover} fill="#000" />
          <rect x={0} y={60 - lidCover} width={100} height={lidCover} fill="#000" />
        </g>
      )}

      {/* Lash line — thin outline of the almond, draws the eye shape */}
      <path
        d="M 4 30 Q 50 -2 96 30 Q 50 62 4 30 Z"
        fill="none"
        stroke={pupilColor}
        strokeWidth={1.2}
        strokeLinejoin="round"
      />
    </svg>
  );
});

window.Eye = Eye;