"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { Input } from "../../ui/input";
import { Label } from "../../ui/label";
import { Badge } from "../../ui/badge";
import { useTranslations } from "next-intl";
function PathParamsEditor({ params, onChange }) {
  const t = useTranslations("devtools.apiTester.pathParam");
  if (params.length === 0) return null;
  const updateParam = (index, value) => {
    const updated = [...params];
    updated[index] = { ...updated[index], value };
    onChange(updated);
  };
  return /* @__PURE__ */ jsx("div", { className: "space-y-3", "data-cy": "api-tester-path-params", children: params.map((param, index) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", "data-cy": `api-tester-path-param-${param.name}`, children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ jsx(Label, { htmlFor: `path-param-${param.name}`, className: "font-mono text-sm", children: param.name }),
      param.required && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "text-xs", children: t("required") }),
      /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-mono", children: param.pattern })
    ] }),
    /* @__PURE__ */ jsx(
      Input,
      {
        id: `path-param-${param.name}`,
        placeholder: t("enterPlaceholder", { name: param.name }),
        value: param.value,
        onChange: (e) => updateParam(index, e.target.value),
        className: "font-mono",
        "data-cy": `api-tester-path-param-${param.name}-input`
      }
    )
  ] }, param.name)) });
}
export {
  PathParamsEditor
};
