"use client";

import { ReactNode } from "react";
import UserPanelSidebar from "@/components/layout/UserPanelSidebar";

type UserPanelLayoutProps = {
  children: ReactNode;
};

const UserPanelLayout = ({
  children,
}: UserPanelLayoutProps) => {
  return (
    <div
      className="
        min-h-[calc(100vh-115px)]

        w-full

        px-3
        md:px-8

        pb-6

        flex
        flex-col
        md:flex-row

        items-start

        gap-4
        md:gap-6

        overflow-auto
        md:overflow-hidden
      "
    >
      {/* Sidebar */}
      <UserPanelSidebar />

      {/* Content */}
      <div
        className="
          min-w-0
          w-full

          flex-1
          md:flex-[3]

          flex
          flex-col

          h-full
          overflow-auto

          box-border
        "
      >
        {children}
      </div>
    </div>
  );
};

export default UserPanelLayout;