import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getAgentTypeIcon, DefaultAgentIcon } from './agent-type-icons.js';
const allAgentTypes = [
    { type: 'claude-code', label: 'Claude Code' },
    { type: 'codex-cli', label: 'Codex CLI' },
    { type: 'copilot-cli', label: 'Copilot CLI' },
    { type: 'cursor', label: 'Cursor' },
    { type: 'gemini-cli', label: 'Gemini CLI' },
    { type: 'aider', label: 'Aider' },
    { type: 'continue', label: 'Continue' },
    { type: 'openrouter', label: 'OpenRouter' },
    { type: 'together-ai', label: 'Together AI' },
    { type: 'dev', label: 'Dev (Mock)' },
];
function AgentIconGallery({ size }) {
    return (_jsxs("div", { className: "flex flex-wrap gap-6", children: [allAgentTypes.map(({ type, label }) => {
                const Icon = getAgentTypeIcon(type);
                return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "border-border bg-muted/30 rounded-md border p-3", children: _jsx(Icon, { className: `h-${size} w-${size}`, style: { width: size * 4, height: size * 4 } }) }), _jsx("span", { className: "text-sm font-medium", children: label }), _jsx("code", { className: "text-muted-foreground text-xs", children: type })] }, type));
            }), _jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "border-border bg-muted/30 rounded-md border p-3", children: _jsx(DefaultAgentIcon, { style: { width: size * 4, height: size * 4 } }) }), _jsx("span", { className: "text-sm font-medium", children: "Fallback" }), _jsx("code", { className: "text-muted-foreground text-xs", children: "undefined" })] })] }));
}
const meta = {
    title: 'Common/AgentTypeIcons',
    tags: ['autodocs'],
    parameters: { layout: 'centered' },
};
export default meta;
export const AllIcons = {
    render: () => _jsx(AgentIconGallery, { size: 10 }),
};
export const SmallIcons = {
    render: () => _jsx(AgentIconGallery, { size: 5 }),
};
export const LargeIcons = {
    render: () => _jsx(AgentIconGallery, { size: 16 }),
};
export const DevAgentIcon = {
    render: () => {
        const Icon = getAgentTypeIcon('dev');
        return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("div", { className: "border-border bg-muted/30 rounded-md border p-3", children: _jsx(Icon, { style: { width: 40, height: 40 } }) }), _jsx("span", { className: "text-sm font-medium", children: "Dev (Mock)" }), _jsx("code", { className: "text-muted-foreground text-xs", children: "dev" })] }));
    },
};
