import * as stylex from '@stylexjs/stylex';

import type { PageProps } from './types';

import { Layout } from '~/src/ui/layouts/layout';
import { PageBackground } from './PageBackground';
import { PageHeader } from './PageHeader';
import { pageStyles } from './styles';

export const Page = ({
  children,
  title,
  rightContent,
  backgroundImage,
  backUrl,
}: PageProps) => {
  return (
    <>
      {backgroundImage && <PageBackground imageUrl={backgroundImage} />}

      <div {...stylex.props(pageStyles.base)}>
        <PageHeader
          title={title}
          rightContent={rightContent}
          backUrl={backUrl}
        />

        <Layout minHeight={0}>
          <Layout overflowY="auto" overflowX="hidden" column paddingBottom="6">
            {children}
          </Layout>
        </Layout>
      </div>
    </>
  );
};