'use client'

import React from 'react'

interface GlitchTextProps {
  text: string
  as?: 'h1' | 'h2' | 'h3' | 'span'
  className?: string
  intensity?: 'subtle' | 'normal' | 'aggressive'
}

const intensityMap = {
  subtle: 3, // 3s interval
  normal: 2.5, // 2.5s interval
  aggressive: 1.5, // 1.5s interval
}

const ComponentWrapper = React.forwardRef<HTMLElement, GlitchTextProps>(
  ({ text, as: Component = 'h1', className, intensity = 'normal' }, ref) => {
    const duration = intensityMap[intensity]

    return (
      <Component
        ref={ref}
        className={`glitch ${className ?? ''}`}
        data-text={text}
        style={{
          '--glitch-duration': `${duration}s`,
        } as React.CSSProperties}
      >
        {text}
      </Component>
    )
  }
)

ComponentWrapper.displayName = 'GlitchText'

export default ComponentWrapper