import React, { FC } from 'react';
import { Box } from '../../Box';
import { Paragraph } from '../../Paragraph';
import { Heading } from '../../Heading';
import { ModalStatus } from '../types';

export interface HeaderProps {
  label?: string;
  status?: ModalStatus;
  children: React.ReactNode;
}

const color = {
  [ModalStatus.Loading]: 'idle',
  [ModalStatus.Idle]: 'idle',
  [ModalStatus.Warning]: 'warning',
  [ModalStatus.Alert]: 'alert',
  [ModalStatus.Success]: 'success',
};

export const Header: FC<HeaderProps> = ({
  status = ModalStatus.Idle,
  children,
  label,
}) => {
  return (
    <Box p="gridGap">
      {label && (
        <Paragraph color={color[status]} fontSize={1} bold mb={0}>
          {label}
        </Paragraph>
      )}
      <Heading as="h1" variant="h2" mb={0}>
        {children}
      </Heading>
    </Box>
  );
};
