"use client";
import { jsxs, jsx } from 'react/jsx-runtime';
import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';

function FormBuilderSkeleton() {
  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-skeleton", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-48" }),
      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-32" }),
      /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-24" }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-1", children: [
      /* @__PURE__ */ jsxs("div", { className: "w-64 border-r p-4 space-y-4", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-24" }),
        Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-12 rounded-lg" }, i))
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 space-y-4", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-32" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-48 rounded-lg" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-24 rounded-lg" })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "w-80 border-l p-4 space-y-4", children: [
        /* @__PURE__ */ jsx(Skeleton, { className: "h-6 w-20" }),
        /* @__PURE__ */ jsx(Skeleton, { className: "h-full rounded-lg" })
      ] })
    ] })
  ] });
}

export { FormBuilderSkeleton };
