// GridOverlay — subtle dot or line grid pattern, faded with a radial
// mask so it brightest at the centre and disappears toward the
// edges. The classic "engineering blueprint" tech vibe without
// fighting the foreground content.
//
// Stacks on top of MeshBackdrop, beneath foreground content. Pointer-
// events off; aria-hidden.

import type { ReactNode } from 'react'
import { cn } from '../cn'

interface GridOverlayProps {
  readonly className?: string
  /** Grid style — dotted (default, gentler) or lined (stronger
   *  blueprint feel). */
  readonly variant?: 'dots' | 'lines'
  /** Cell size in px. Default 32. */
  readonly size?: number
}

export const GridOverlay = ({
  className, variant = 'dots', size = 32,
}: GridOverlayProps): ReactNode => {
  // For dots: a single radial gradient repeating in a tiny tile.
  // For lines: two linear gradients (h + v) over the same tile.
  const dotsBg = `radial-gradient(circle, var(--foreground) 1px, transparent 1.5px)`
  const linesBg
    = `linear-gradient(to right, var(--foreground) 1px, transparent 1px),`
    + `linear-gradient(to bottom, var(--foreground) 1px, transparent 1px)`

  return (
    <div
      aria-hidden="true"
      className={cn(
        'absolute inset-0 pointer-events-none opacity-[0.06]',
        className,
      )}
      style={{
        backgroundImage: variant === 'lines' ? linesBg : dotsBg,
        backgroundSize: `${size}px ${size}px`,
        // Radial mask: full opacity at centre, fades to 0 at edges.
        // Tailwind doesn't have a mask utility in stable v4 so this
        // stays inline.
        WebkitMaskImage:
          'radial-gradient(ellipse at center, black 0%, transparent 75%)',
        maskImage:
          'radial-gradient(ellipse at center, black 0%, transparent 75%)',
      }}
    />
  )
}