import React from 'react';
import styled from 'styled-components';
import Rodal from 'rodal';
import 'rodal/lib/rodal.css';
export const ModalWrapper = ({
  visible,
  setvisible,
  children,
  title,
  height,
}) => {
  return /*#__PURE__*/ React.createElement(
    'div',
    {
      className: 'basic-modal',
    },
    /*#__PURE__*/ React.createElement(
      Rodal,
      {
        visible: visible,
        onClose: () => setvisible(false),
        showCloseButton: false,
        width: 515,
        height: height,
      },
      /*#__PURE__*/ React.createElement(
        ModalContent,
        {
          className: 'modal-content',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'modal-header',
          },
          /*#__PURE__*/ React.createElement(ModalTitle, null, title)
        ),
        children
      )
    )
  );
};
export const LargeModal = ({
  visible,
  setvisible,
  children,
  title,
  spantitle,
  largespantitle,
  height,
}) => {
  return /*#__PURE__*/ React.createElement(
    React.Fragment,
    null,
    /*#__PURE__*/ React.createElement(
      Rodal,
      {
        visible: visible,
        onClose: () => setvisible(false),
        showCloseButton: false,
        width: 650,
        height: height,
      },
      /*#__PURE__*/ React.createElement(
        ModalContent,
        {
          className: 'modal-content',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'modal-header',
          },
          /*#__PURE__*/ React.createElement(ModalTitle, null, title),
          /*#__PURE__*/ React.createElement(
            'h4',
            {
              className: 'name',
            },
            spantitle
          ),
          /*#__PURE__*/ React.createElement(
            'h4',
            {
              className: 'name',
            },
            largespantitle
          ),
          /*#__PURE__*/ React.createElement('p', null)
        ),
        children
      )
    )
  );
};
export const VeryLargeModal = ({
  visible,
  setvisible,
  children,
  title,
  height,
  spantitle,
  largespantitle,
}) => {
  return /*#__PURE__*/ React.createElement(
    'div',
    {
      className: 'very-large-modal',
    },
    /*#__PURE__*/ React.createElement(
      Rodal,
      {
        visible: visible,
        onClose: () => setvisible(false),
        showCloseButton: false,
        width: 820,
        height: height,
      },
      /*#__PURE__*/ React.createElement(
        ModalContent,
        {
          className: 'modal-content',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'modal-header',
          },
          /*#__PURE__*/ React.createElement(
            ModalTitle,
            null,
            title,
            largespantitle
              ? /*#__PURE__*/ React.createElement(
                  'span',
                  {
                    className: 'large-span',
                  },
                  largespantitle
                )
              : ''
          ),
          spantitle
            ? /*#__PURE__*/ React.createElement(
                'p',
                {
                  className: 'small-span',
                },
                spantitle
              )
            : ''
        ),
        children
      )
    )
  );
};
export const SmallModal = ({
  visible,
  setvisible,
  children,
  title,
  height,
}) => {
  return /*#__PURE__*/ React.createElement(
    'div',
    {
      className: 'small-modall',
    },
    /*#__PURE__*/ React.createElement(
      Rodal,
      {
        visible: visible,
        onClose: () => setvisible(false),
        showCloseButton: false,
        width: 385,
        height: height || 240,
      },
      /*#__PURE__*/ React.createElement(
        ModalContent,
        {
          className: 'modal-content small-modal',
        },
        /*#__PURE__*/ React.createElement(
          'div',
          {
            className: 'modal-header',
          },
          /*#__PURE__*/ React.createElement(ModalTitle, null, title)
        ),
        children
      )
    )
  );
};
const ModalTitle = styled.h3`
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--ff-sbold);
  color: var(--co-head);
`;
const ModalContent = styled.div`
  .modal-header {
    padding: 3rem 4rem;
    display: flex;
    align-items: center;
  }
  & .name {
    margin-left: 30px;
    display: flex;
    align-items: center;
    .small-span {
      font-size: 12px;
      margin-left: 0.8rem;
    }
    .large-span {
      opacity: 0.7;
      margin-left: 0.5rem;
    }
  }
  &.small-modal {
    .modal-header {
      font-size: 1.8rem;
      padding-bottom: 1.5rem;
    }
    ${ModalTitle} {
      font-size: 1.8rem;
    }
    p {
      margin-bottom: 3rem;
      font-size: 16px;
      line-height: 1.75;
      span {
        font-family: var(--ff-bold);
        font-weight: 700;
        color: var(--co-head);
      }
    }
  }
`;
