"use client";

import { Flex } from "@radix-ui/themes";
import useWindowDimensions from "../../hooks/useWindowDimensions";
import NavigationPanel from "../ui/NavigationPanel";

export default function NavigationWrapper({
  children,
}: {
  children: React.ReactNode
}) {
  const dimensions = useWindowDimensions();

  if (dimensions.width > 510) {
    return (
      <Flex direction='row' gap='4'>
        <div><NavigationPanel /></div>
        <div className='w-full p-0'>{children}</div>
      </Flex>
    );
  } else {
    return (
      <Flex direction='column' gap='4'>
      <div><NavigationPanel mobileUi /></div>
        <div className='w-full p-0'>{children}</div>
      </Flex>
    );
  };
}
