import { jsx as e, jsxs as r } from "react/jsx-runtime";
import d from "react";
import p from "../../Form.js";
import u from "../../hooks/useZodForm.js";
import a from "../../../box/Box.js";
import h from "../../../text/Text.js";
import s from "../../../field/Field.js";
import o from "../../../field/components/field-label/FieldLabel.js";
import i from "../../../field/components/field-control/FieldControl.js";
import t from "../../../simple-input/SimpleInput.js";
import f from "../../../button/Button.js";
import { o as g, i as w, s as l } from "../../../../types-Brp6Qwfh.js";
const y = g({
  username: l().min(3, { message: "Username must be at least 3 characters" }),
  email: l().email({ message: "Please enter a valid email address" }),
  password: l().min(8, { message: "Password must be at least 8 characters" }),
  confirmPassword: l(),
  avatar: w(FileList).optional()
}).refine((m) => m.password === m.confirmPassword, {
  message: "Passwords do not match",
  path: ["confirmPassword"]
}), S = () => {
  const m = u({
    schema: y,
    defaultValues: { username: "", email: "", password: "", confirmPassword: "" }
  }), n = d.useCallback((c) => {
    console.log(c), alert("Registration form submitted successfully!");
  }, []);
  return /* @__PURE__ */ e(a, { className: "w-full flex items-center justify-center", children: /* @__PURE__ */ r(a, { className: "w-[var(--spacing-96)] p-[var(--spacing-6)] bg-[var(--base-background)] rounded-[var(--border-radius-lg)] shadow-md", children: [
    /* @__PURE__ */ e(h, { type: "h2", align: "center", children: "Register Account" }),
    /* @__PURE__ */ e(a, { className: "mt-[var(--spacing-4)]", children: /* @__PURE__ */ e(p, { form: m, onSubmit: n, children: /* @__PURE__ */ r(a, { className: "flex flex-col gap-[var(--spacing-4)]", children: [
      /* @__PURE__ */ r(s, { name: "username", children: [
        /* @__PURE__ */ e(o, { required: !0, children: "Username" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { placeholder: "Enter your username" }) })
      ] }),
      /* @__PURE__ */ r(s, { name: "email", children: [
        /* @__PURE__ */ e(o, { required: !0, children: "Email" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { type: "email", placeholder: "Enter your email" }) })
      ] }),
      /* @__PURE__ */ r(s, { name: "password", children: [
        /* @__PURE__ */ e(o, { required: !0, children: "Password" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { type: "password", placeholder: "Enter your password" }) })
      ] }),
      /* @__PURE__ */ r(s, { name: "confirmPassword", children: [
        /* @__PURE__ */ e(o, { required: !0, children: "Confirm Password" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { type: "password", placeholder: "Confirm your password" }) })
      ] }),
      /* @__PURE__ */ r(s, { name: "avatar", children: [
        /* @__PURE__ */ e(o, { children: "Avatar" }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(t, { type: "file", multiple: !0 }) })
      ] }),
      /* @__PURE__ */ e(a, { className: "pt-[var(--spacing-2)]", children: /* @__PURE__ */ e(f, { type: "submit", label: "Register" }) })
    ] }) }) })
  ] }) });
};
export {
  S as default
};
//# sourceMappingURL=RegistrationFormWrapper.js.map
