/**
 * CollapsibleCard — Shared accordion card with expand/collapse header,
 * optional OK-to-dismiss button, and controlled/uncontrolled modes.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useCallback } from 'react';
import { cn } from '../../../utils/cn.js';
export const CollapsibleCard = React.memo(function CollapsibleCard({ default_expanded = false, expanded: controlled_expanded, on_expanded_change, icon, title, tag, trailing, show_dismiss_button, dismiss_label = 'OK', on_dismiss, muted, dimmed, class_name, title_class_name, children, }) {
    const is_controlled = controlled_expanded !== undefined;
    const [internal_expanded, set_internal_expanded] = useState(default_expanded);
    const is_expanded = is_controlled ? controlled_expanded : internal_expanded;
    const toggle = useCallback(() => {
        const next = !is_expanded;
        if (is_controlled) {
            on_expanded_change?.(next);
        }
        else {
            set_internal_expanded(next);
            on_expanded_change?.(next);
        }
    }, [is_expanded, is_controlled, on_expanded_change]);
    const handle_dismiss = useCallback(() => {
        on_dismiss?.();
        if (is_controlled) {
            on_expanded_change?.(false);
        }
        else {
            set_internal_expanded(false);
        }
    }, [on_dismiss, is_controlled, on_expanded_change]);
    return (_jsxs("div", { className: cn('cls_collapsible_card rounded-lg overflow-hidden border-2 border-border/60 shadow-sm bg-card transition-colors', dimmed && 'opacity-70', class_name), children: [_jsxs("button", { type: "button", onClick: toggle, className: cn('w-full flex items-center gap-2.5 px-4 py-3 text-left transition-colors', 'hover:bg-muted/30', muted && 'opacity-60'), children: [_jsx("svg", { className: cn('w-3.5 h-3.5 shrink-0 transition-transform text-muted-foreground', !is_expanded && '-rotate-90'), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) }), icon, _jsx("div", { className: "flex-1 min-w-0", children: _jsx("span", { className: cn('text-sm font-medium truncate block', title_class_name), children: title }) }), tag && (_jsx("span", { className: "text-[10px] text-muted-foreground/60 uppercase tracking-wide shrink-0", children: tag })), trailing] }), is_expanded && (_jsxs("div", { className: "px-4 pb-4", children: [children, show_dismiss_button && (_jsx("div", { className: "mt-3 flex justify-end", children: _jsx("button", { type: "button", onClick: handle_dismiss, className: "px-4 py-1.5 text-sm font-medium rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: dismiss_label }) }))] }))] }));
});
//# sourceMappingURL=collapsible_card.js.map