/*
 * Copyright (c) 2022 @automata-network/wallet-sdk authors and contributors.
 * This software may be modified and distributed under the terms of UNLICENSED
 * license. Refer to the LICENSE file for details.
 */
import React, { PropsWithChildren } from 'react'
import {
  Modal as ReactResponsiveModal,
  ModalProps as ReactResponsiveModalProps
} from 'react-responsive-modal'

import { useWallet } from '../../store/wallet'

interface ModalProps extends ReactResponsiveModalProps {
  title?: string
}

export const Modal: React.FC<PropsWithChildren<ModalProps>> = (props) => {
  const { prefixCls } = useWallet()
  const { classNames, title, children, ...restProps } = props
  const { root, modal, closeIcon, ...restClassName } = classNames || {}

  return (
    <ReactResponsiveModal
      center
      classNames={{
        root: [`${prefixCls}modalRoot`, root].join(' '),
        modal: [`${prefixCls}modal`, modal].join(' '),
        closeIcon: [`${prefixCls}modalCloseIcon`, closeIcon].join(' '),
        ...restClassName
      }}
      {...restProps}
    >
      <div className={`${prefixCls}modalWrap`}>
        {title ? <div className={`${prefixCls}modalTitle`}>{title}</div> : null}
        <div className={`${prefixCls}modalContent`}>{children}</div>
      </div>
    </ReactResponsiveModal>
  )
}