import { AlertTriangle, ChevronDown, Maximize2, Minimize2 } from 'lucide-react';
import { useState } from 'react';

export default function SectionCard({
    id,
    title,
    warning,
    action,
    defaultOpen = true,
    children,
}: {
    id: string;
    title: string;
    warning?: boolean;
    action?: React.ReactNode;
    defaultOpen?: boolean;
    children: React.ReactNode;
}) {
    const [open, setOpen] = useState(defaultOpen);
    const [expanded, setExpanded] = useState(false);

    return (
        <div
            id={id}
            data-profile-section
            className="border-border bg-card scroll-mt-24 overflow-hidden rounded-2xl border shadow-sm"
        >
            {/* Card header */}
            <div className="border-border flex items-center gap-2.5 border-b px-5 py-3.5">
                {warning && (
                    <AlertTriangle className="h-4 w-4 shrink-0 text-orange-500" />
                )}
                <h2 className="text-foreground flex-1 text-sm font-semibold">
                    {title}
                </h2>
                {action && <div className="flex items-center">{action}</div>}
                <div className="flex items-center gap-1">
                    <button
                        type="button"
                        onClick={() => setExpanded((v) => !v)}
                        className="text-muted-foreground dark:text-muted-foreground/50 hover:text-muted-foreground rounded-lg p-1 transition-colors"
                        title={expanded ? 'Collapse' : 'Expand'}
                    >
                        {expanded ? (
                            <Minimize2 className="h-3.5 w-3.5" />
                        ) : (
                            <Maximize2 className="h-3.5 w-3.5" />
                        )}
                    </button>
                    <button
                        type="button"
                        onClick={() => setOpen((v) => !v)}
                        className="text-muted-foreground dark:text-muted-foreground/50 hover:text-muted-foreground rounded-lg p-1 transition-colors"
                    >
                        <ChevronDown
                            className={`h-4 w-4 transition-transform duration-200 ${open ? '' : '-rotate-90'}`}
                        />
                    </button>
                </div>
            </div>

            {open && <div className={expanded ? 'p-8' : 'p-5'}>{children}</div>}
        </div>
    );
}