import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown, faChevronRight } from '@fortawesome/pro-duotone-svg-icons';
import { cx } from '@/utils/cx';

interface CollapsibleSectionProps {
    title: string;
    subtitle?: string;
    badge?: string;
    badgeColor?: string;
    defaultOpen?: boolean;
    children: React.ReactNode;
}

export const CollapsibleSection = ({
    title,
    subtitle,
    badge,
    badgeColor = 'text-brand-secondary',
    defaultOpen = true,
    children,
}: CollapsibleSectionProps) => {
    const [open, setOpen] = useState(defaultOpen);

    return (
        <div className="rounded-xl border border-secondary bg-primary overflow-hidden">
            <button
                onClick={() => setOpen(!open)}
                className="flex w-full items-center justify-between px-5 py-3.5 hover:bg-primary_hover transition duration-100 ease-linear"
            >
                <div className="flex items-center gap-3">
                    <FontAwesomeIcon
                        icon={open ? faChevronDown : faChevronRight}
                        className="size-3 text-fg-quaternary"
                    />
                    <div className="text-left">
                        <div className="flex items-center gap-2">
                            <span className="text-sm font-semibold text-primary">{title}</span>
                            {badge && (
                                <span className={cx('text-xs font-medium tabular-nums', badgeColor)}>
                                    {badge}
                                </span>
                            )}
                        </div>
                        {subtitle && <p className="text-xs text-tertiary mt-0.5">{subtitle}</p>}
                    </div>
                </div>
            </button>
            {open && (
                <div className="border-t border-secondary px-5 pb-4">
                    {children}
                </div>
            )}
        </div>
    );
};