import type { FC, ReactNode } from 'react';
import type { BoxProps } from '../Box';

import prettyWrap from '~/src/lib/utils/prettyWrap';
import Box from '../Box';
import Text from '../Text';

/**
 * A standardized title and subtitle/description layout.
 */
const TitleText: FC<
  {
    title?: ReactNode;
    subtitle?: ReactNode;
    spaceBetween?: string;
    titleTag?: 'h1' | 'h2' | 'h3';
  } & Omit<BoxProps, 'spaceBetween'>
> = ({
  title,
  titleTag = 'h2',
  subtitle,
  spaceBetween = '0.5rem',
  ...boxProps
}) => {
  return (
    <Box {...boxProps}>
      {title && (
        <Text
          size="2.5rem"
          centered
          isBold
          tag={titleTag}
          lineHeight="1.1em"
          margin={`-0.1em 0 0`}
        >
          {prettyWrap(title)}
        </Text>
      )}
      {subtitle && (
        <Text
          size="1.55rem"
          centered
          isParagraph
          lineHeight="1.3em"
          margin={`${title ? spaceBetween : '0'} 0 0`}
          color="#bbb"
        >
          {prettyWrap(subtitle)}
        </Text>
      )}
    </Box>
  );
};

export default TitleText;