'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '@/lib/utils';
import { getPhosphorIcon } from '@/lib/utils/icons';
/**
 * Sidebar Section component - groups items under a title with optional icon
 */ export function SidebarSection({ title, children, className = '', icon }) {
    const IconComponent = getPhosphorIcon(icon);
    return /*#__PURE__*/ _jsxs("div", {
        className: cn('docs-sidebar-section flex flex-col', className),
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "docs-sidebar-section-header flex items-center gap-2 px-4 py-3",
                children: [
                    IconComponent && /*#__PURE__*/ _jsx(IconComponent, {
                        className: "docs-sidebar-section-icon h-4 w-4 text-sidebar-foreground/70",
                        weight: "regular"
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "docs-sidebar-section-title text-sm font-semibold text-sidebar-foreground",
                        children: title
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("ul", {
                className: "docs-sidebar-section-items flex flex-col gap-0.5 px-2 pb-4",
                children: children
            })
        ]
    });
}
