import React from "react";
import { Modal as AntdModal } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import styled from "styled-components";

const StyledModal = styled(AntdModal)`
  .ant-modal-content {
    padding: 0;
  }
  .ant-modal-header {
    padding: 14px;
    background-color: ${(props) => props.theme?.colors?.verisBgSecondary};
    border-bottom: 1px solid ${(props) => props.theme?.colors?.verisBorder};
    margin: 0;
  }
  .ant-modal-footer {
    padding: 14px;
  }
`;

const Modal = (props) => {
  const { children, ...rest } = props;

  return (
    <StyledModal closeIcon={<CloseOutlined color="#2F4644" />} {...rest}>
      <div style={{ padding: 14 }}>{children}</div>
    </StyledModal>
  );
};

export default Modal;