text: import React from 'react'
  import propTypes from 'prop-types'
  import styled from '@emotion/styled'
  
  import { ModalClose } from '.'
  import { emptyObject } from '../../utils/util'
  
  const ModalContentView = styled('div')`
    label: ModalContentView;
  
    padding: 3rem 3rem;
  `
  
  const ModalHeader = styled.div`
    label: ModalHeader;
  
    margin: 0 0 2.5rem;
  `
  
  const ModalIcon = styled.div`
    label: ModalIcon;
  
    margin: -1rem 0 1rem;
  `
  
  const ModalTitle = styled.p`
    label: ModalTitle;
  
    margin: 0;
    line-height: 1;
    font-family: ${(props) => props.theme.fonts.preface.family};
    font-size: 2.2rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-weight: 500;
    color: ${(props) => props.theme.colors.primary};
  
    span {
      color: ${(props) => props.theme.colors.secondary};
    }
  `
  
  const ModalSubtitle = styled('div')`
    p {
      margin-top: 1rem;
      line-height: ${(props) => props.theme.lineHeight};
    }
  `
  
  const ModalBody = styled.div`
    label: ModalBody;
  
    > div {
      p {
        margin: 1em 0;
        line-height: ${(props) => props.theme.lineHeight};
  
        button {
          margin: 0 1rem 1rem 0;
          &:last-child {
            margin: 0;
          }
        }
      }
    }
  
    // > div + div {
    //   margin: ${(props) => props.theme.layout.padding} 0 0;
    // }
  `
  
  const ModalFooter = styled('div')`
    label: ModalFooter;
  
    margin-top: 2rem;
  
    > {
      p {
        font-size: ${(props) => props.theme.fonts.sizes.small};
      }
    }
  
    > div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
  
      button {
        flex-shrink: 0;
        display: block;
        margin: 1rem 1rem 0 0;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  `
  
  const ModalContent = ({
    close = true,
    icon = undefined,
    title,
    subtitle,
    footer,
    children,
    style,
    modalHeaderStyle = emptyObject,
    modalFooterStyle = emptyObject,
  }) => {
    const hasHeader = !!(icon || title || subtitle)
  
    return (
      <>
        <ModalContentView
          role="dialog"
          aria-labelledby="dialogTitle"
          style={style}
        >
          {close && <ModalClose />}
          {hasHeader && (
            <ModalHeader style={modalHeaderStyle}>
              {icon && <ModalIcon>{icon}</ModalIcon>}
              {title && <ModalTitle id="dialogTitle">{title}</ModalTitle>}
              {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}
            </ModalHeader>
          )}
          <ModalBody>{children}</ModalBody>
          {footer && <ModalFooter style={modalFooterStyle}>{footer}</ModalFooter>}
        </ModalContentView>
      </>
    )
  }
  
  ModalContent.displayName = 'ModalContent'
  ModalContent.propTypes = {
    close: propTypes.bool,
    title: propTypes.oneOfType([propTypes.string, propTypes.element]),
    subtitle: propTypes.oneOfType([propTypes.string, propTypes.element]),
    footer: propTypes.oneOfType([propTypes.string, propTypes.element]),
    children: propTypes.oneOfType([
      propTypes.arrayOf(propTypes.node),
      propTypes.node,
    ]),
    style: propTypes.object,
  }
  
  export default ModalContent
  