"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Textarea } from "../../ui/textarea";
import { Alert, AlertDescription } from "../../ui/alert";
import { AlertCircle } from "lucide-react";
import { validateJsonBody } from "./utils/url-builder";
function PayloadEditor({ value, onChange }) {
  const [error, setError] = useState(null);
  useEffect(() => {
    const validationError = validateJsonBody(value);
    setError(validationError);
  }, [value]);
  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", "data-cy": "api-tester-payload", children: [
    /* @__PURE__ */ jsx(
      Textarea,
      {
        placeholder: '{"key": "value"}',
        value,
        onChange: (e) => onChange(e.target.value),
        className: "font-mono min-h-[150px] text-sm",
        "data-cy": "api-tester-payload-textarea"
      }
    ),
    error && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", "data-cy": "api-tester-payload-error", children: [
      /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
      /* @__PURE__ */ jsx(AlertDescription, { children: error })
    ] })
  ] });
}
export {
  PayloadEditor
};
