// ─────────────────────────────────────────────────────────────────────────────
// Ultra Image Cropper 2.0 — Grid Overlay Renderer
// ─────────────────────────────────────────────────────────────────────────────

import React from 'react';
import type { GridOverlay } from '@/types';

interface GridOverlayRendererProps {
  type: GridOverlay;
  width: number;
  height: number;
}

export const GridOverlayRenderer: React.FC<GridOverlayRendererProps> = ({ type, width, height }) => {
  const stroke = 'rgba(255,255,255,0.4)';
  const strokeW = 0.5;

  if (type === 'none') return null;

  const lines: React.ReactNode[] = [];

  if (type === 'thirds') {
    const x1 = width / 3, x2 = (2 * width) / 3;
    const y1 = height / 3, y2 = (2 * height) / 3;
    lines.push(
      <line key="v1" x1={x1} y1={0} x2={x1} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="v2" x1={x2} y1={0} x2={x2} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="h1" x1={0} y1={y1} x2={width} y2={y1} stroke={stroke} strokeWidth={strokeW} />,
      <line key="h2" x1={0} y1={y2} x2={width} y2={y2} stroke={stroke} strokeWidth={strokeW} />
    );
  } else if (type === 'center') {
    lines.push(
      <line key="v" x1={width / 2} y1={0} x2={width / 2} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="h" x1={0} y1={height / 2} x2={width} y2={height / 2} stroke={stroke} strokeWidth={strokeW} />
    );
  } else if (type === 'diagonal') {
    lines.push(
      <line key="d1" x1={0} y1={0} x2={width} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="d2" x1={width} y1={0} x2={0} y2={height} stroke={stroke} strokeWidth={strokeW} />
    );
  } else if (type === 'golden') {
    const phi = 1.618;
    const gx = width / phi;
    const gy = height / phi;
    lines.push(
      <line key="v1" x1={gx} y1={0} x2={gx} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="v2" x1={width - gx} y1={0} x2={width - gx} y2={height} stroke={stroke} strokeWidth={strokeW} />,
      <line key="h1" x1={0} y1={gy} x2={width} y2={gy} stroke={stroke} strokeWidth={strokeW} />,
      <line key="h2" x1={0} y1={height - gy} x2={width} y2={height - gy} stroke={stroke} strokeWidth={strokeW} />
    );
  }

  return (
    <svg
      className="ultra-grid-overlay"
      width={width}
      height={height}
      style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }}
      aria-hidden="true"
    >
      {lines}
    </svg>
  );
};