import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
import { H as h, T as a, C as t, c as l } from "../index-sdOMz8GW.js";
import { ShieldCheck as p, Check as i, X as n, Puzzle as u, Monitor as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const N = () => {
  const c = [
    "Use useIsMounted to guard async state updates and prevent memory leaks",
    "Prefer useElementSize over useMeasure for simple width/height tracking",
    "Leverage generic types: useElementSize<HTMLCanvasElement>()",
    "Debounce rapid state changes when using useToastStore",
    "Import only needed hooks for optimal tree-shaking",
    "Combine useLockBodyScroll with focus management for accessible modals",
    "Use useEventListener for keyboard navigation instead of inline handlers",
    "Pass proper event types to useEventListener for type safety",
    "Use useClickAway with a RefObject for dropdown/popover close behavior",
    "Call useAnchorScroll once at root level for smooth scroll navigation"
  ], d = [
    "Destructure useCopyToClipboard as [value, fn] — it returns [stateObj, fn]",
    "Forget that useScrollableSlider requires react-router-dom context",
    "Use useMeasure when you only need width/height — it has more overhead",
    "Lock body scroll without preserving scrollbar width (useLockBodyScroll handles this)",
    "Create multiple useToastStore instances — it is a singleton Zustand store",
    "Ignore the noUserInteraction field in useCopyToClipboard state",
    "Use useIsMounted as a function — it returns a boolean directly",
    "Mix up useElementSize ref (callback ref) with useRef (RefObject)",
    "Hardcode breakpoint pixel values — use useBreakpoint named values instead",
    "Forget cleanup when using useEventListener with custom elements"
  ];
  return /* @__PURE__ */ s(m, { children: [
    /* @__PURE__ */ e(
      h,
      {
        title: "Best Practices",
        description: "Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",
        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(p, { 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(a, { tag: "h2", className: "mb-2", children: "Recommendations" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Follow these guidelines for robust hook implementations"
          }
        )
      ] }),
      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
          ] }),
          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(i, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
          ] }, r)) })
        ] }) }),
        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
          ] }),
          /* @__PURE__ */ e("ul", { className: "space-y-2", children: d.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
          ] }, r)) })
        ] }) })
      ] })
    ] }),
    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
      /* @__PURE__ */ s("div", { className: "text-center", children: [
        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Common Patterns" }),
        /* @__PURE__ */ e(
          a,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Recommended hook composition patterns"
          }
        )
      ] }),
      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Accessible Modal Pattern" })
        ] }),
        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
          l,
          {
            language: "tsx",
            noExpand: !0,
            code: `function Modal({ isOpen, onClose, children }) {
  const modalRef = useRef<HTMLDivElement>(null);
  
  // Lock scroll when modal opens
  useLockBodyScroll(isOpen);
  
  // Close on click outside
  useClickAway(modalRef, onClose);
  
  // Close on Escape key
  useEventListener('keydown', (e) => {
    if (e.key === 'Escape') onClose();
  });

  if (!isOpen) return null;
  return <div ref={modalRef} role="dialog">{children}</div>;
}`
          }
        ) })
      ] }) }),
      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Responsive Layout Pattern" })
        ] }),
        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
          l,
          {
            language: "tsx",
            noExpand: !0,
            code: `function ResponsiveGrid({ children }) {
  const { isMobile } = useIsMobile();
  const { isGridCompact, setIsGridCompact } = useGridSwitcher();
  const breakpoint = useBreakpoint();

  // Auto-switch to compact on mobile
  useEffect(() => {
    if (isMobile && !isGridCompact) {
      setIsGridCompact(true);
    }
  }, [isMobile]);

  const cols = breakpoint === '4xl' ? 6 
    : breakpoint === '2xl' ? 4 
    : isGridCompact ? 3 : 2;

  return <div className={\`grid grid-cols-\${cols}\`}>{children}</div>;
}`
          }
        ) })
      ] }) })
    ] })
  ] });
};
export {
  N as default
};
