import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { SkillCard } from './skill-card.js';
const CATEGORY_ORDER = ['Workflow', 'Code Generation', 'Analysis', 'Reference'];
function groupByCategory(skills) {
    const groups = new Map();
    for (const skill of skills) {
        const group = groups.get(skill.category) ?? [];
        group.push(skill);
        groups.set(skill.category, group);
    }
    return groups;
}
export function SkillList({ skills, onSkillSelect }) {
    const groups = groupByCategory(skills);
    return (_jsx("div", { className: "space-y-8", children: CATEGORY_ORDER.map((category) => {
            const categorySkills = groups.get(category);
            if (!categorySkills || categorySkills.length === 0)
                return null;
            return (_jsxs("section", { children: [_jsxs("h2", { className: "mb-4 text-lg font-semibold", children: [category, ' ', _jsxs("span", { className: "text-muted-foreground text-sm font-normal", children: ["(", categorySkills.length, ")"] })] }), _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3", children: categorySkills.map((skill) => (_jsx(SkillCard, { skill: skill, onSelect: onSkillSelect }, skill.name))) })] }, category));
        }) }));
}
