Arc Marquee

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type ArcMarqueeProps = {  text: string  curve?: number  height?: number  speed?: number  direction?: 'left' | 'right'  fade?: number  gap?: number  separator?: string  separatorClassName?: string  draggable?: boolean  settle?: number  grip?: number  paused?: boolean  pauseButton?: boolean  labels?: { pause: string; play: string }  textClassName?: string  className?: string}export function ArcMarquee({  text,  curve = 40,  height = 260,  speed = 70,  direction = 'left',  fade = 96,  gap = 48,  separator,  separatorClassName,  draggable = true,  settle = 900,  grip = 1,  paused = false,  pauseButton = true,  labels = { pause: 'Pause', play: 'Play' },  textClassName,  className,}: ArcMarqueeProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}