import { useIntl } from "@/i18n/IntlProvider";
import createUseStyles from "@/theme/createUseStyles";

import PageHeader from "../home/components/PageHeader";
import { cn } from "@/util/cn";

const useStyles = createUseStyles(({ sizes }) => ({
  tabContent: {
    maxWidth: sizes.maxWidthValue,
  },
}));

export default function HomePageWrapper({ children }: React.PropsWithChildren) {
  const { t } = useIntl();
  const classes = useStyles();
  return (
    <div className="bg-black w-full h-screen flex flex-col">
      <PageHeader title={t("page.home.header")} />
      <div className="w-full h-full">
        <div className="flex flex-col items-center bg-black m-auto">
          <div className={cn("p-m w-full", classes.tabContent)}>{children}</div>
        </div>
      </div>
    </div>
  );
}
