import React from 'react'
import './comfirm-view.scss'
import { defaultTitle, defaultContent } from './comfirm-view.js'

function comfirmView({ show, onClose, onConfirm, onCancel, title = defaultTitle, content = defaultContent }) {
  if (!show) {
    return null
  }

  const handleConfirmClick = () => {
    if (onConfirm) {
      onConfirm()
    }
    if (onClose) {
      onClose()
    }
  }

  const handleCancelClick = () => {
    if (onCancel) {
      onCancel()
    }
    if (onClose) {
      onClose()
    }
  }

  return (
    <div className="comfirm-container">
      <div className="alert-bg">
        <div className="title">
          <label>{title}</label>
        </div>
        <div className="content">
          <label>{content}</label>
        </div>
        <div className="footer">
          <div className="cancel-button" onClick={handleCancelClick}>取消</div>
          <div className="confirm-button" onClick={handleConfirmClick}>确定</div>
        </div>
      </div>
    </div>
  )
}

export default comfirmView
