Kutt/client/components/Modal.tsx

import React, { FC } from 'react';
import styled from 'styled-components';
import { Flex } from 'reflexbox/styled-components';

import Button from './Button';

interface Props {
  close: any; // TODO: typing
  handler?: any; // TODO: typing
  show?: boolean;
}

const Wrapper = styled.div`
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(50, 50, 50, 0.8);
  z-index: 1000;
`;

const Content = styled.div`
  padding: 48px 64px;
  text-align: center;
  border-radius: 8px;
  background-color: white;

  @media only screen and (max-width: 768px) {
    width: 90%;
    padding: 32px;
  }
`;

const ButtonsWrapper = styled(Flex).attrs({
  justifyContent: 'center',
  mt: 40,
})`
  button {
    margin: 0 16px;
  }
`;

const Modal: FC<Props> = ({ children, handler, show, close }) =>
  show ? (
    <Wrapper>
      <Content>
        {children}
        <ButtonsWrapper>
          <Button color="gray" onClick={close}>
            {handler ? 'No' : 'Close'}
          </Button>
          {handler && <Button onClick={handler}>Yes</Button>}
        </ButtonsWrapper>
      </Content>
    </Wrapper>
  ) : null;

Modal.defaultProps = {
  show: false,
  handler: null,
};

export default Modal;