'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, createContext, useContext } from 'react';
import { cn } from '@/lib/utils';
import { CaretDown } from '@phosphor-icons/react';
import * as PhosphorIcons from '@phosphor-icons/react';
/**
 * Accordion Components for MDX Documentation
 * 
 * Mintlify-compatible accordion components for collapsible content sections.
 */ // Dynamic icon resolver
function getIcon(iconName) {
    if (!iconName) return null;
    const pascalCase = iconName.split(/[-_]/).map((word)=>word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
    const Icon = PhosphorIcons[pascalCase];
    return Icon || null;
}
const AccordionGroupContext = /*#__PURE__*/ createContext(null);
export function Accordion({ title, children, description, icon, defaultOpen = false, className }) {
    const groupContext = useContext(AccordionGroupContext);
    const [localOpen, setLocalOpen] = useState(defaultOpen);
    // Generate a stable ID for this accordion
    const id = React.useId();
    // Use group context if available, otherwise use local state
    const isOpen = groupContext ? groupContext.openItems.has(id) : localOpen;
    const toggle = ()=>{
        if (groupContext) {
            groupContext.toggleItem(id);
        } else {
            setLocalOpen(!localOpen);
        }
    };
    // Register default open state with group on mount
    React.useEffect(()=>{
        if (groupContext && defaultOpen) {
            groupContext.toggleItem(id);
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    const Icon = icon ? getIcon(icon) : null;
    return /*#__PURE__*/ _jsxs("div", {
        className: cn('border border-border rounded-lg overflow-hidden', 'bg-card', className),
        children: [
            /*#__PURE__*/ _jsxs("button", {
                type: "button",
                onClick: toggle,
                className: cn('flex w-full items-center gap-3 p-4 text-left', 'hover:bg-muted/50 transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50'),
                "aria-expanded": isOpen,
                children: [
                    Icon && /*#__PURE__*/ _jsx(Icon, {
                        className: "h-5 w-5 shrink-0 text-primary",
                        weight: "duotone"
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "flex-1 min-w-0",
                        children: [
                            /*#__PURE__*/ _jsx("div", {
                                className: "font-medium text-foreground",
                                children: title
                            }),
                            description && /*#__PURE__*/ _jsx("div", {
                                className: "text-sm text-muted-foreground mt-0.5",
                                children: description
                            })
                        ]
                    }),
                    /*#__PURE__*/ _jsx(CaretDown, {
                        className: cn('h-5 w-5 shrink-0 text-muted-foreground transition-transform duration-200', isOpen && 'rotate-180'),
                        weight: "bold"
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("div", {
                className: cn('grid transition-all duration-200 ease-in-out', isOpen ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'),
                children: /*#__PURE__*/ _jsx("div", {
                    className: "overflow-hidden",
                    children: /*#__PURE__*/ _jsx("div", {
                        className: "px-4 pb-4 text-sm text-foreground/90 [&>p]:mb-2 [&>p:last-child]:mb-0",
                        children: children
                    })
                })
            })
        ]
    });
}
export function AccordionGroup({ children, allowMultiple = true, className }) {
    const [openItems, setOpenItems] = useState(new Set());
    const toggleItem = (id)=>{
        setOpenItems((prev)=>{
            const next = new Set(prev);
            if (next.has(id)) {
                next.delete(id);
            } else {
                if (!allowMultiple) {
                    next.clear();
                }
                next.add(id);
            }
            return next;
        });
    };
    return /*#__PURE__*/ _jsx(AccordionGroupContext.Provider, {
        value: {
            openItems,
            toggleItem,
            allowMultiple
        },
        children: /*#__PURE__*/ _jsx("div", {
            className: cn('space-y-2 my-4', className),
            children: children
        })
    });
}
