import React, { useRef, useState, useEffect } from 'react';
import './MarqueeText.css';

const MarqueeText = ({ text, className, style, duration = '10s' }) => {
  const containerRef = useRef(null);
  const textRef = useRef(null);
  const [isOverflowing, setIsOverflowing] = useState(false);

  const formattedDuration = typeof duration === 'number' ? `${duration}s` : duration;

  useEffect(() => {
    const checkOverflow = () => {
      if (containerRef.current && textRef.current) {
        setIsOverflowing(textRef.current.scrollWidth > containerRef.current.clientWidth);
      }
    };
    checkOverflow();
    window.addEventListener('resize', checkOverflow);
    return () => window.removeEventListener('resize', checkOverflow);
  }, [text]);

  return (
    <div className={`marquee-container ${className || ''}`} ref={containerRef} style={{ ...style, overflow: 'hidden', whiteSpace: 'nowrap', width: '100%', flex: '1 1 0' }}>
      <div 
        className="marquee-inner-text"
        ref={textRef} 
        style={{ 
          display: 'inline-block', 
          animation: isOverflowing ? `marquee-scroll ${formattedDuration} linear infinite` : 'none',
          paddingLeft: isOverflowing ? '100%' : '0',
          fontSize: 'inherit',
          fontWeight: 'inherit',
          color: 'inherit',
          lineHeight: 'inherit',
          letterSpacing: 'inherit'
        }}
      >
        {text}
      </div>
    </div>
  );
};

export default MarqueeText;