import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faChevronDown, faChevronUp, IconDefinition} from "@fortawesome/free-solid-svg-icons";
import React from "react";

interface CollapsableAreaProps {
    title: string;
    children: React.ReactNode;
    icon?: IconDefinition;
}

export default function CollapsableArea(
    {
        title,
        children,
        icon,
    }: CollapsableAreaProps) {
    const [isExpanded, setIsExpanded] = React.useState(false);

    return (
        <div
            className="bg-tertiary/90 backdrop-blur-sm rounded-xl p-4 border border-secondary/50 mb-4 shadow-md hover:shadow-lg transition-all duration-200">
            <button
                className="flex justify-between items-center w-full text-left group hover:scale-[1.02] transition-all duration-200"
                    onClick={() => setIsExpanded(!isExpanded)}>
                <div className="flex items-center">
                    {
                        icon && (
                            <div
                                className="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-2 shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-200">
                                <FontAwesomeIcon
                                    icon={icon}
                                    className="text-white w-4 h-4 group-hover:rotate-12 transition-transform duration-200"
                                />
                            </div>
                        )
                    }
                    <span className="text-text-primary font-bold">{title}</span>
                </div>
                <FontAwesomeIcon
                    icon={isExpanded ? faChevronUp : faChevronDown}
                    className="text-primary w-5 h-5 group-hover:scale-110 transition-all duration-200"
                />
            </button>

            {isExpanded && (
                <div className="mt-4 p-3 bg-secondary/20 rounded-lg border border-secondary/30 animate-fadeIn">
                    {children}
                </div>
            )}
        </div>
    );
}