'use client';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { BaseDrawer } from '../../common/base-drawer/index.js';
import { DrawerTitle, DrawerDescription } from '../../ui/drawer.js';
import { Badge } from '../../ui/badge.js';
import { Separator } from '../../ui/separator.js';
import { FolderOpen } from 'lucide-react';
export function SkillDetailDrawer({ skill, onClose }) {
    return (_jsx(BaseDrawer, { open: skill !== null, onClose: onClose, size: "sm", modal: true, "data-testid": "skill-detail-drawer", header: skill ? (_jsxs(_Fragment, { children: [_jsx(DrawerTitle, { children: skill.displayName }), _jsx(DrawerDescription, { children: skill.name })] })) : undefined, children: skill ? (_jsxs("div", { className: "px-4 pb-4", children: [_jsx("p", { className: "text-muted-foreground text-sm", children: skill.description }), _jsxs("div", { className: "mt-4 flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), _jsx(Badge, { variant: "outline", children: skill.category }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null] }), skill.allowedTools ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Allowed Tools" }), _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: skill.allowedTools })] })] })) : null, skill.resources.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-semibold", children: "Resources" }), _jsx("ul", { className: "mt-2 space-y-1.5", children: skill.resources.map((resource) => (_jsxs("li", { className: "text-muted-foreground flex items-center gap-2 text-sm", children: [_jsx(FolderOpen, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [resource.name, "/ \u2014 ", resource.fileCount, ' ', resource.fileCount === 1 ? 'file' : 'files'] })] }, resource.name))) })] })] })) : null, skill.body ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-4" }), _jsx("pre", { className: "text-muted-foreground text-sm leading-relaxed whitespace-pre-wrap", children: skill.body })] })) : null] })) : null }));
}
