import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
import { H as m, T as t, C as i } from "../index-sdOMz8GW.js";
import { CheckCircle as l, Check as h, XCircle as p, X as f, Zap as u, Timer as g, Eye as x, Layers as y } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const D = () => {
  const o = [
    "Always define a TypeScript interface for your form values",
    "Use generic types: Form<FormValues>, FormField<FormValues>",
    "Prefer centralized validationSchema for consistency",
    "Provide clear, user-friendly error messages",
    'Use mode: "onBlur" for large forms (fewer re-renders)',
    'Use mode: "onChange" when real-time feedback is needed',
    "Always add labels for accessibility (FormField label prop)",
    "Use reset() to clear forms after successful submission"
  ], n = [
    "Don't use uncontrolled inputs outside FormField — they won't register",
    "Don't call setValue without shouldValidate: true if you need instant feedback",
    "Don't put useFormContext in a component outside Form — it will crash",
    "Don't mix controlled and uncontrolled patterns in the same field",
    "Don't use watch() for values you only read on submit — use getValues() instead",
    "Don't forget defaultValues — required for reset() and initial state",
    "Don't validate on every keystroke for complex async checks — use debounce",
    "Don't skip FormField for inputs that need error display"
  ], c = [
    {
      title: "Isolated Re-renders",
      description: "react-hook-form only re-renders the field that changed, not the whole form. This is automatic.",
      icon: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-amber-500" })
    },
    {
      title: "Use onBlur Mode",
      description: 'For forms with 10+ fields, mode: "onBlur" validates only when the user leaves a field, reducing re-renders.',
      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-blue-500" })
    },
    {
      title: "Avoid watch() Overuse",
      description: "Each watch() call subscribes to re-renders. Use getValues() for one-time reads in handlers.",
      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-purple-500" })
    },
    {
      title: "Split Large Forms",
      description: "For wizard/multi-step flows, split into multiple Form instances or conditional sections.",
      icon: /* @__PURE__ */ e(y, { className: "w-5 h-5 text-green-500" })
    }
  ];
  return /* @__PURE__ */ s(d, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Best Practices",
        description: "Guidelines for building performant, accessible, and maintainable forms with the tucu-ui form system.",
        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Quick reference for form development"
          }
        )
      ] }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
            /* @__PURE__ */ e(l, { className: "w-5 h-5 text-green-500" }),
            /* @__PURE__ */ e(
              t,
              {
                tag: "h3",
                className: "font-semibold text-green-700 dark:text-green-400",
                children: "Do"
              }
            )
          ] }),
          o.map((a, r) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
            /* @__PURE__ */ e(
              t,
              {
                tag: "span",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: a
              }
            )
          ] }, r))
        ] }) }),
        /* @__PURE__ */ e(i, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
            /* @__PURE__ */ e(p, { className: "w-5 h-5 text-red-500" }),
            /* @__PURE__ */ e(
              t,
              {
                tag: "h3",
                className: "font-semibold text-red-700 dark:text-red-400",
                children: "Don't"
              }
            )
          ] }),
          n.map((a, r) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(f, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
            /* @__PURE__ */ e(
              t,
              {
                tag: "span",
                className: "text-sm text-gray-600 dark:text-gray-400",
                children: a
              }
            )
          ] }, r))
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Performance Tips" }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "How to keep forms fast as they grow in complexity"
          }
        )
      ] }),
      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: c.map((a, r) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
          a.icon,
          /* @__PURE__ */ e(t, { tag: "h3", className: "font-semibold", children: a.title })
        ] }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
            children: a.description
          }
        )
      ] }) }, r)) })
    ] })
  ] });
};
export {
  D as default
};
