import { useEffect } from "react";

import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
import useBreakPoint from "hooks/useBreakPoint.ts";

export default function CartPage() {
  const { isDesktop } = useBreakPoint();
  // Prevent keyboard from appearing automatically on mobile
  useEffect(() => {
    // Blur any focused element when component mounts
    if (document.activeElement instanceof HTMLElement) {
      document.activeElement.blur();
    }

    // Prevent focus on any input elements
    const inputs = document.querySelectorAll("input, textarea, select");
    inputs.forEach((input) => {
      if (input instanceof HTMLElement) {
        input.blur();
      }
    });
  }, []);

  // Enhanced desktop layout
  if (isDesktop) {
    return <CartDesktopLayout />;
  }

  // Mobile/Tablet Layout (existing code)
  return <CartMobileTabletLayout />;
}