import type { ReactNode } from "react";

export function DashboardShell({
  children,
  width = "default",
}: {
  children: ReactNode;
  width?: "default" | "narrow" | "wide";
}) {
  const maxWidth =
    width === "narrow"
      ? "max-w-2xl"
      : width === "wide"
        ? "max-w-6xl"
        : "max-w-5xl";

  return (
    <div
      className={`mx-auto w-full px-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] py-5 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:py-6 lg:px-8 lg:py-8 ${maxWidth}`}
    >
      {children}
    </div>
  );
}
