import { cn } from '@/lib/utils';

type EightPointGridProps = {
  className?: string;
  opacity?: number;
};

/** Subtle Hospitaller-inspired eight-point structural grid (decorative) */
export function EightPointGrid({ className, opacity = 0.08 }: EightPointGridProps) {
  return (
    <svg
      viewBox="0 0 100 100"
      className={cn('pointer-events-none absolute inset-0 h-full w-full text-sovereign-gold', className)}
      aria-hidden
      style={{ opacity }}
    >
      <polygon
        points="50,4 58,22 96,26 66,42 74,78 50,62 26,78 34,42 4,26 42,22"
        fill="none"
        stroke="currentColor"
        strokeWidth={0.5}
      />
      <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth={0.35} />
      {[0, 45, 90, 135].map((deg) => (
        <line
          key={deg}
          x1={50}
          y1={50}
          x2={50 + 46 * Math.cos((deg * Math.PI) / 180)}
          y2={50 + 46 * Math.sin((deg * Math.PI) / 180)}
          stroke="currentColor"
          strokeWidth={0.3}
        />
      ))}
    </svg>
  );
}
