// Eye — doodle-style line illustration. Almond silhouette with a solid dark
// pupil/iris that follows the cursor. Blink collapses to a horizontal line.
//
// Props:
//   pupilX, pupilY  — normalized -1..1 cursor offset
//   blink           — collapse to a thin line
//   s               — width in px

const BauhausEye = ({
  pupilX = 0,
  pupilY = 0,
  blink = false,
  s = 220
}) => {
  const VB = 400;
  // pupil travel in viewBox units — clamped to stay inside the almond
  const maxX = 36;
  const maxY = 14;
  const px = Math.max(-1, Math.min(1, pupilX)) * maxX;
  const py = Math.max(-1, Math.min(1, pupilY)) * maxY;

  return (
    <svg width={s} height={s} viewBox={`0 0 ${VB} ${VB}`}
    style={{ display: 'block', overflow: 'visible', strokeWidth: "6px" }}>
      {blink ?
      <path d="M 52 200 Q 200 220, 352 200"
      stroke="currentColor" strokeWidth="16"
      strokeLinecap="round" fill="none" /> :

      <g>
          {/* offset white fill — peeks out from behind the almond */}
          <path d="M52 200 C80 148, 130 108, 200 104 C270 100, 330 148, 352 200 C330 254, 270 296, 200 298 C130 296, 78 252, 52 200 Z"
        fill="#FFFFFF" stroke="none"
        transform="translate(14 10)" />
          {/* almond silhouette */}
          <path d="M52 200 C80 148, 130 108, 200 104 C270 100, 330 148, 352 200 C330 254, 270 296, 200 298 C130 296, 78 252, 52 200 Z"
        stroke="currentColor" strokeWidth="16"
        strokeLinecap="round" strokeLinejoin="round" fill="none" />
          {/* iris/pupil — solid dark, tracks cursor */}
          <path d={`M${148 + px} ${200 + py} C${148 + px} ${169 + py}, ${171 + px} ${146 + py}, ${200 + px} ${146 + py} C${229 + px} ${146 + py}, ${254 + px} ${169 + py}, ${254 + px} ${200 + py} C${254 + px} ${231 + py}, ${229 + px} ${254 + py}, ${200 + px} ${254 + py} C${171 + px} ${254 + py}, ${148 + px} ${231 + py}, ${148 + px} ${200 + py} Z`}
        fill="currentColor" stroke="currentColor" strokeWidth="16"
        strokeLinecap="round" strokeLinejoin="round" />
        </g>
      }
    </svg>);

};

window.BauhausEye = BauhausEye;