'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CaretDown, Check } from '@phosphor-icons/react';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import { Button } from '@/components/ui/button';
const METHODS = [
    'GET',
    'POST',
    'PUT',
    'PATCH',
    'DELETE',
    'HEAD',
    'OPTIONS'
];
const METHOD_COLORS = {
    GET: 'text-green-500',
    POST: 'text-blue-500',
    PUT: 'text-orange-500',
    PATCH: 'text-purple-500',
    DELETE: 'text-red-500',
    HEAD: 'text-gray-500',
    OPTIONS: 'text-gray-500'
};
export function MethodSelector({ value, onChange, disabled = false }) {
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                asChild: true,
                children: /*#__PURE__*/ _jsxs(Button, {
                    variant: "ghost",
                    className: `flex items-center gap-1 px-4 py-2 h-auto bg-muted/50 hover:bg-muted rounded-l-md rounded-r-none border-r border-border font-semibold text-sm ${METHOD_COLORS[value]}`,
                    disabled: disabled,
                    children: [
                        /*#__PURE__*/ _jsx("span", {
                            className: "w-16 text-left",
                            children: value
                        }),
                        /*#__PURE__*/ _jsx(CaretDown, {
                            className: "h-4 w-4",
                            weight: "bold"
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsx(DropdownMenuContent, {
                align: "start",
                className: "min-w-[120px]",
                children: METHODS.map((method)=>/*#__PURE__*/ _jsxs(DropdownMenuItem, {
                        onClick: ()=>onChange(method),
                        className: `font-semibold ${METHOD_COLORS[method]}`,
                        children: [
                            /*#__PURE__*/ _jsx("span", {
                                className: "flex-1",
                                children: method
                            }),
                            value === method && /*#__PURE__*/ _jsx(Check, {
                                className: "h-4 w-4 ml-2",
                                weight: "bold"
                            })
                        ]
                    }, method))
            })
        ]
    });
}
