import { useLayoutEffect, useRef, useState } from 'react';

interface FitTextProps {
  children: string;
  className?: string;
}

const FitText: React.FC<FitTextProps> = ({ children, className = '' }) => {
  const textRef = useRef<HTMLSpanElement>(null);
  const [fontSize, setFontSize] = useState(16);

  useLayoutEffect(() => {
    const element = textRef.current;
    if (!element) return;

    const fitText = () => {
      let nextFontSize = 16;
      element.style.fontSize = `${nextFontSize}px`;

      while (element.scrollWidth > element.clientWidth && nextFontSize > 8) {
        nextFontSize -= 0.5;
        element.style.fontSize = `${nextFontSize}px`;
      }

      setFontSize(nextFontSize);
    };

    fitText();
    const resizeObserver = new ResizeObserver(fitText);
    resizeObserver.observe(element);

    return () => resizeObserver.disconnect();
  }, [children]);

  return (
    <span
      ref={textRef}
      className={`block whitespace-nowrap ${className}`}
      style={{ fontSize: `${fontSize}px` }}
    >
      {children}
    </span>
  );
};

export default FitText;