import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, CardContent, CardHeader, CardTitle } from '../../ui/card.js';
import { Badge } from '../../ui/badge.js';
import { FolderOpen } from 'lucide-react';
export function SkillCard({ skill, onSelect }) {
    return (_jsxs(Card, { className: "hover:border-primary/50 cursor-pointer transition-colors", role: "button", tabIndex: 0, onClick: () => onSelect(skill), onKeyDown: (e) => {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onSelect(skill);
            }
        }, "data-testid": `skill-card-${skill.name}`, children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsx(CardTitle, { className: "text-base", children: skill.displayName }), _jsx("p", { className: "text-muted-foreground font-mono text-xs", children: skill.name })] }), _jsxs(CardContent, { className: "space-y-3", children: [_jsx("p", { className: "text-muted-foreground line-clamp-2 text-sm", children: skill.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [_jsx(Badge, { variant: skill.source === 'project' ? 'secondary' : 'outline', children: skill.source === 'project' ? 'Project' : 'Global' }), skill.context ? _jsx(Badge, { variant: "outline", children: skill.context }) : null, skill.allowedTools ? _jsx(Badge, { variant: "outline", children: "Tools" }) : null, skill.resources.length > 0 ? (_jsxs("span", { className: "text-muted-foreground inline-flex items-center gap-1 text-xs", children: [_jsx(FolderOpen, { className: "size-3" }), skill.resources.length, " ", skill.resources.length === 1 ? 'resource' : 'resources'] })) : null] })] })] }));
}
