import { Container, ContainerProps, Box } from "@mantine/core";
import useRouterConfig from "@/features/core/hooks/use-router-config";
import BackButton from "@/features/core/components/back-button";
import SettingsButton from "@/features/core/components/settings-button";

interface PageProps extends ContainerProps, React.PropsWithChildren {
  noPadding?: boolean;
  fullWidth?: boolean;
}

const Page = ({ children, noPadding, fullWidth, ...props }: PageProps) => {
  const { header } = useRouterConfig();
  return (
    <Container
      px={noPadding ? 0 : "md"}
      pt={header.collapsed ? 60 : 0}
      pb={20}
      m={0}
      maw={fullWidth ? '100%' : 600}
      mx="auto"
      pos="relative"
      {...props}
    >
      {header.collapsed && header.withBackButton && (
        <BackButton offsetY={0} />
      )}
      {header.collapsed && header.settingsLink && (
        <SettingsButton to={header.settingsLink} offsetY={0} />
      )}
      {children}
    </Container>
  );
};

export default Page;