import PropTypes from 'prop-types'
import { Flex, Typography, Button } from 'antd'
import InfoCircleIcon from '../../Icons/InfoCircleIcon.jsx'

const { Text } = Typography

const MessageDialogView = ({
  icon,
  title,
  description,
  onOk,
  okText,
  okLoading
}) => {
  return (
    <Flex vertical gap={'middle'}>
      <Flex gap={'middle'}>
        {icon || <InfoCircleIcon />}
        <Text strong>{title}</Text>
      </Flex>
      {description && <Text>{description}</Text>}
      <Flex justify={'end'}>
        <Button type='primary' onClick={onOk} loading={okLoading}>
          {okText || 'OK'}
        </Button>
      </Flex>
    </Flex>
  )
}

MessageDialogView.propTypes = {
  icon: PropTypes.node,
  title: PropTypes.node.isRequired,
  description: PropTypes.node,
  onOk: PropTypes.func.isRequired,
  okText: PropTypes.string,
  okLoading: PropTypes.bool
}

export default MessageDialogView