import type { ReactNode, SVGProps } from 'react';

/**
 * A reusable SVG football pitch in StatsBomb coordinates (120 × 80, attacking
 * toward x = 120). Children are drawn in the same coordinate space, so shot maps
 * and pass networks just place marks at their raw (x, y).
 */
export function Pitch({
  children,
  className,
  ...rest
}: { children?: ReactNode; className?: string } & SVGProps<SVGSVGElement>) {
  const line = { stroke: 'var(--app-line-strong)', strokeWidth: 0.4, fill: 'none', opacity: 0.65 };
  return (
    <svg viewBox="-2 -2 124 84" className={className} {...rest}>
      <rect x="0" y="0" width="120" height="80" rx="0.5" fill="var(--app-pitch)" opacity={0.1} />
      {/* outer + halfway */}
      <rect x="0" y="0" width="120" height="80" {...line} />
      <line x1="60" y1="0" x2="60" y2="80" {...line} />
      <circle cx="60" cy="40" r="9.15" {...line} />
      <circle cx="60" cy="40" r="0.6" fill="var(--app-line-strong)" opacity={0.65} />
      {/* left box */}
      <rect x="0" y="18" width="18" height="44" {...line} />
      <rect x="0" y="30" width="6" height="20" {...line} />
      <circle cx="12" cy="40" r="0.6" fill="var(--app-line-strong)" opacity={0.65} />
      <line x1="0" y1="36" x2="-1.2" y2="36" {...line} />
      <line x1="0" y1="44" x2="-1.2" y2="44" {...line} />
      <line x1="-1.2" y1="36" x2="-1.2" y2="44" {...line} />
      {/* right box */}
      <rect x="102" y="18" width="18" height="44" {...line} />
      <rect x="114" y="30" width="6" height="20" {...line} />
      <circle cx="108" cy="40" r="0.6" fill="var(--app-line-strong)" opacity={0.65} />
      <line x1="120" y1="36" x2="121.2" y2="36" {...line} />
      <line x1="120" y1="44" x2="121.2" y2="44" {...line} />
      <line x1="121.2" y1="36" x2="121.2" y2="44" {...line} />
      {children}
    </svg>
  );
}
