'use client'

interface WaterDistortionProps {
  id?: string
  intensity?: number
}

export default function WaterDistortion({
  id = 'water-distortion',
  intensity = 0.003,
}: WaterDistortionProps) {
  return (
    <filter id={id}>
      <feTurbulence
        type="fractalNoise"
        baseFrequency={`${intensity} ${intensity * 1.5}`}
        numOctaves={3}
        seed={42}
        result="turbulence"
      >
        <animate
          attributeName="seed"
          from="0"
          to="100"
          dur="10s"
          repeatCount="indefinite"
        />
      </feTurbulence>
      <feDisplacementMap
        in="SourceGraphic"
        in2="turbulence"
        scale={4}
        xChannelSelector="R"
        yChannelSelector="G"
      />
    </filter>
  )
}