import { Typography } from "@mui/material";
import { useEffect, useRef, useState } from "react";

interface ExpandableTextProps {
    text: string;
    extendedText: string;
    numberOfLine: number;
}

const ExpandableText: React.FC = ({ text, extendedText = "Description", numberOfLine = 3 }) => {
    const [expanded, setExpanded] = useState(false);
    const [maxHeight, setMaxHeight] = useState('none');
    const contentRef = useRef(null);

    useEffect(() => {
        if (contentRef.current) {
            setMaxHeight(expanded ? contentRef.current.scrollHeight : `${numberOfLine * 1.5}em`);
        }
    }, [expanded, numberOfLine])

    const toggleExpand = () => {
        setExpanded((prev) => !prev);
    };

    return (
        
            

                
                    {text}
                
            
            
                {expanded ? `Collapse ${extendedText}` : `Expand ${extendedText}`}
            
        >
    );
};


export default ExpandableText;