'use client'

interface WatermarkProps {
  text: string
}

export default function Watermark({ text }: WatermarkProps) {
  if (!text) return null

  return (
    <div
      className="fixed inset-0 pointer-events-none z-10 overflow-hidden select-none"
      aria-hidden="true"
    >
      <div className="absolute inset-0 flex items-center justify-center">
        <div
          className="text-white/[0.03] text-2xl font-mono whitespace-nowrap tracking-widest"
          style={{
            transform: 'rotate(-35deg) scale(1.5)',
            userSelect: 'none',
            WebkitUserSelect: 'none',
          }}
        >
          {/* Repeat the watermark text in a grid pattern */}
          {Array.from({ length: 7 }, (_, row) => (
            <div key={row} className="my-16">
              {Array.from({ length: 3 }, (_, col) => (
                <span key={col} className="mx-12">{text}</span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}