import {JSX, useState} from "react";
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronDown, faChevronRight} from '@fortawesome/free-solid-svg-icons';

export interface CollapseProps {
    title: string;
    content: JSX.Element;
}

export default function Collapse({title, content}: CollapseProps) {
    const [isOpen, setIsOpen] = useState<boolean>(false);
    
    function toggleCollapse(): void {
        setIsOpen(!isOpen);
    }
    
    return (
        <div className="mb-4 shadow-md hover:shadow-lg transition-all duration-200">
            <button
                onClick={toggleCollapse}
                className={`w-full text-left bg-secondary/50 hover:bg-secondary transition-all duration-200 p-4 flex items-center justify-between group border border-secondary/50 ${
                    isOpen ? 'rounded-t-xl' : 'rounded-xl'
                }`}
            >
                <span className="text-text-primary font-medium">{title}</span>
                <FontAwesomeIcon
                    icon={isOpen ? faChevronDown : faChevronRight}
                    className="text-primary w-4 h-4 transition-transform group-hover:scale-110"
                />
            </button>
            {isOpen && (
                <div
                    className="bg-secondary/30 border-l-4 border-primary p-4 rounded-b-xl border border-t-0 border-secondary/50 animate-fadeIn">
                    <div className="text-text-primary">{content}</div>
                </div>
            )}
        </div>
    );
}