import React, { isValidElement } from 'react';
import { chakra, Flex, FlexProps, Box } from '@chakra-ui/react';

export interface HeaderProps extends Omit<FlexProps, 'title'> {
  title?: React.ReactNode;
  subTitle?: React.ReactNode;
  extra?: React.ReactNode;
}

export function Header({ title, subTitle, extra, ...rest }: HeaderProps) {
  const titleMarkup = isValidElement(title) ? (
    <>
      {title}
      {subTitle && <chakra.span ml="10px">{subTitle}</chakra.span>}
    </>
  ) : (
    <chakra.h2
      m={0}
      color="#434343"
      fontWeight={600}
      lineHeight="24px"
      wordBreak="break-all"
      fontSize={{ base: '17px', sm: '16px' }}
    >
      {title}
      {subTitle && <chakra.span ml="10px">{subTitle}</chakra.span>}
    </chakra.h2>
  );

  return (
    <Flex align="center" pt={5} px={{ base: 4, sm: 5 }} {...rest}>
      <Box flex={1}>{titleMarkup}</Box>
      {extra && (
        <Box float="right" ml="auto">
          {extra}
        </Box>
      )}
    </Flex>
  );
}