import React, { useState, useRef, useEffect } from 'react';

interface ReadMoreTextProps {
  text?: string;
  maxLines?: number;
}

const ReadMoreText: React.FC<ReadMoreTextProps> = ({
  text = '',
  maxLines = 3,
}) => {
  const [expanded, setExpanded] = useState(false);
  const [showToggle, setShowToggle] = useState(false);
  const textRef = useRef<HTMLDivElement>(null);

  // Detect overflow
  useEffect(() => {
    const el = textRef.current;
    if (el) {
      setShowToggle(el.scrollHeight > el.clientHeight);
    }
  }, [text]);

  return (
    <div>
      <div
        ref={textRef}
        style={{
          display: '-webkit-box',
          WebkitLineClamp: expanded ? 'unset' : maxLines,
          WebkitBoxOrient: 'vertical',
          overflow: 'hidden',
          whiteSpace: 'pre-wrap',
          lineHeight: '1.6',
        }}
      >
        {text || '–'}
      </div>

      {showToggle && (
        <span
          onClick={() => setExpanded(!expanded)}
          style={{
            color: '#1677ff',
            cursor: 'pointer',
            fontWeight: 500,
            marginTop: 4,
            display: 'inline-block',
          }}
        >
          {expanded ? 'Read less' : 'Read more'}
        </span>
      )}
    </div>
  );
};

export default ReadMoreText;