import React, {ReactNode, useState} from "react";
import {ChevronDown, ChevronUp, LucideIcon} from 'lucide-react';
import IconContainer from "@/components/ui/IconContainer";

type CollapseVariant = 'default' | 'card';

export interface CollapseProps {
    title: string;
    icon?: LucideIcon;
    variant?: CollapseVariant;
    content?: ReactNode;
    children?: ReactNode;
    defaultOpen?: boolean;
}

export default function Collapse(
    {
        title,
        icon,
        variant = 'default',
        content,
        children,
        defaultOpen = false,
    }: CollapseProps) {
    const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
    const renderContent: ReactNode = children || content;
    const isCard: boolean = variant === 'card';
    const ChevronIcon = isOpen ? ChevronUp : ChevronDown;

    return (
        <div
            className={`mb-4 transition-colors duration-150 ${isCard ? 'bg-tertiary rounded-xl' : ''}`}>
            <button
                onClick={() => setIsOpen(!isOpen)}
                className={`
                    w-full text-left transition-all duration-200 p-4 flex items-center justify-between group
                    ${isCard
                    ? ''
                    : `bg-secondary hover:bg-gray-dark ${isOpen ? 'rounded-t-xl' : 'rounded-xl'}`
                }
                `}
            >
                <div className="flex items-center gap-2">
                    {icon && (
                        <div className="transition-colors duration-150">
                            <IconContainer icon={icon} size="sm" shape="circle" filled/>
                        </div>
                    )}
                    <span className="text-text-primary font-bold">{title}</span>
                </div>
                <ChevronIcon className="text-primary w-4 h-4 transition-transform"
                             strokeWidth={1.75}/>
            </button>

            {isOpen && (
                <div className={`animate-fadeIn ${isCard
                    ? 'p-3 m-4 mt-0 bg-darkest-background rounded-lg'
                    : 'bg-darkest-background border-l-4 border-primary p-4 rounded-b-xl'
                }`}>
                    {renderContent}
                </div>
            )}
        </div>
    );
}