'use client';

import { useState } from 'react';
import { RollingText } from '@/components/ui/shadcn-io/rolling-text';

interface HoverRollingTextProps {
  text: string;
  className?: string;
  transition?: { duration: number; delay: number };
}

export function HoverRollingText({ text, transition }: HoverRollingTextProps) {
  const [isHovered, setIsHovered] = useState(false);
  const [key, setKey] = useState(0);

  const handleMouseEnter = () => {
    setIsHovered(true);
    setKey(prev => prev + 1); // Force re-render to restart animation
  };

  const handleMouseLeave = () => {
    setIsHovered(false);
  };

  return (
    <span
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      className="cursor-pointer"
    >
      <RollingText
        key={key}
        text={text}
        inView={isHovered}
        inViewOnce={false}
        transition={transition}
      />
    </span>
  );
}
