import { useState, type ReactNode } from 'react';
import { ChevronDown } from 'lucide-react';

interface CollapsibleSectionProps {
    id: string;
    title: string;
    icon: React.ElementType;
    subtitle?: ReactNode;
    meta?: ReactNode;
    defaultOpen?: boolean;
    badge?: ReactNode;
    children: ReactNode;
    className?: string;
}

export function CollapsibleSection({
    id,
    title,
    icon: Icon,
    subtitle,
    meta,
    defaultOpen = false,
    badge,
    children,
    className = '',
}: CollapsibleSectionProps) {
    const [open, setOpen] = useState(defaultOpen);

    return (
        <section
            className={`overflow-hidden rounded-2xl border border-slate-800/80 bg-slate-900/40 ${className}`}
            aria-labelledby={id}
        >
            <div id={id} className="flex items-center gap-2 px-4 py-3 transition hover:bg-slate-800/10">
                <button
                    type="button"
                    aria-expanded={open}
                    onClick={() => setOpen((value) => !value)}
                    className="flex min-w-0 flex-1 items-center gap-3 text-left transition hover:opacity-90"
                >
                    <Icon className="h-4 w-4 shrink-0 text-slate-500" />
                    <span className="min-w-0 flex-1">
                        <span className="flex flex-wrap items-center gap-2">
                            <span className="text-[10px] font-bold uppercase tracking-[0.18em] text-slate-500">{title}</span>
                            {badge}
                        </span>
                        {subtitle ? <span className="mt-0.5 block text-[9px] text-slate-600">{subtitle}</span> : null}
                    </span>
                    <ChevronDown
                        className={`h-4 w-4 shrink-0 text-slate-500 transition-transform duration-200 ${open ? 'rotate-180' : ''}`}
                    />
                </button>
                {meta ? <div className="shrink-0">{meta}</div> : null}
            </div>
            {open ? <div className="border-t border-slate-800/60">{children}</div> : null}
        </section>
    );
}