import React from 'react';
import CloseIcon from '../../icons/CloseIcon';
import Button from '../Button';
import Typography from '../Typography';
import { ModalProps } from './interfaces';
import {
  Backdrop,
  CloseButton,
  ContentHeader,
  ContentWrapper,
  Wrapper,
} from './styles';
import { config as theme } from '../../theme';

const Modal: React.FC<ModalProps> = ({
  maxWidth,
  title,
  subtitle,
  onClose,
  hideHeader = false,
  children,
}) => {
  return (
    <Wrapper>
      <Backdrop onClick={onClose} />
      <ContentWrapper maxWidth={maxWidth}>
        <CloseButton>
          <Button
            type="button"
            title="Close"
            variant="transparent"
            iconButton
            icon={<CloseIcon />}
            onClick={onClose}
          />
        </CloseButton>
        {!hideHeader && (
          <ContentHeader hasTitle={Boolean(title || subtitle)}>
            {title && (
              <Typography variant="h5" fontWeight={400} margin={[0, 0, 8, 0]}>
                {title}
              </Typography>
            )}
            {subtitle && (
              <Typography variant="utility3" color={theme.colors.neutral[600]}>
                {subtitle}
              </Typography>
            )}
          </ContentHeader>
        )}
        {children}
      </ContentWrapper>
    </Wrapper>
  );
};

export default Modal;