// Eye.jsx — the BrandSight eye-in-frame icon, drawn as inline SVG so we can animate parts.
// Brackets, eye outline, iris, pupil. All red on dark, can be inverted.

function BrandsightEye({ size = 200, color = '#FF6329', frameColor, scanProgress = null, opacity = 1 }) {
  const fc = frameColor || color;
  // viewBox 100x100, eye centered. Frame brackets at corners.
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', opacity }}>
      {/* Corner brackets */}
      <g stroke={fc} strokeWidth="6" fill="none" strokeLinecap="square">
        <path d="M 8 22 V 8 H 22" />
        <path d="M 78 8 H 92 V 22" />
        <path d="M 92 78 V 92 H 78" />
        <path d="M 22 92 H 8 V 78" />
      </g>
      {/* Eye almond */}
      <path
        d="M 18 50 Q 50 22, 82 50 Q 50 78, 18 50 Z"
        fill={color}
      />
      {/* Iris (white ring) */}
      <circle cx="50" cy="50" r="13" fill="#fff" />
      {/* Pupil */}
      <circle cx="50" cy="50" r="6" fill={color} />
      {/* Optional scan line */}
      {scanProgress != null && (
        <line
          x1={8 + scanProgress * 84} y1="6" x2={8 + scanProgress * 84} y2="94"
          stroke={color} strokeWidth="1" strokeDasharray="2 3" opacity="0.55"
        />
      )}
    </svg>
  );
}

window.BrandsightEye = BrandsightEye;