"use client";

import { useSidebarContext } from "@/context/SidebarContext";
import type { PropsWithChildren } from "react";
import { twMerge } from "tailwind-merge";

export function LayoutContent({ children }: PropsWithChildren) {
  const sidebar = useSidebarContext();
  return (
    <div
      id="main-content"
      className={twMerge(
        "relative h-full w-full overflow-y-auto bg-gray-50 dark:bg-gray-900",
        sidebar.desktop.isCollapsed ? "lg:ml-16" : "lg:ml-64"
      )}
    >
      <div className="mt-0 ml-0 md:mt-4 md:ml-4 lg:mt-4 lg:ml-4 md:mr-4 pb-5 mb-5  rounded-lg bg-white dark:bg-gray-900 px-4 min-h-[80dvh] shadow-sm">
        {children}
      </div>
    </div>
  );
}