import type { PageSectionComponent } from '../types';
import type { PageHeaderSectionProps } from './types';

import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';

export const PageHeaderSection: PageSectionComponent<
  PageHeaderSectionProps
> = ({ title, subtitle }) => {
  if (!title && !subtitle) {
    return null;
  }

  return (
    <Layout column gap="4" justify="center">
      {title && (
        <Text variant="title-1" align="center">
          {title}
        </Text>
      )}
      {subtitle && (
        <Text variant="title-2" align="center">
          <pre style={{ fontSize: 'inherit', fontFamily: 'inherit' }}>
            {subtitle}
          </pre>
        </Text>
      )}
    </Layout>
  );
};