import React, { useState } from 'react';
import { ChevronDown, ChevronUp } from 'lucide-react';

interface ExpandableTextProps {
  text: string;
  maxLength?: number;
}

export const ExpandableText: React.FC<ExpandableTextProps> = ({
  text,
  maxLength = 300,
}) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const shouldTruncate = text.length > maxLength;

  if (!shouldTruncate) {
    return <p className="text-body-sm font-mono leading-7 text-term-text">{text}</p>;
  }

  return (
    <div className="relative">
      <p className={`text-body-sm font-mono leading-7 text-term-text ${
        !isExpanded ? 'line-clamp-3' : ''
      }`}>
        {text}
      </p>
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        className="mt-2 flex items-center gap-1 text-xs font-mono text-info transition-colors hover:text-term-text"
      >
        {isExpanded ? (
          <>
            <span>Show less</span>
            <ChevronUp className="h-3 w-3" />
          </>
        ) : (
          <>
            <span>Read more</span>
            <ChevronDown className="h-3 w-3" />
          </>
        )}
      </button>
    </div>
  );
};
