import React, { useState } from 'react'

import { DeleteOutlined } from '@ant-design/icons'
import { Button } from 'antd'
import clsx from 'clsx'

type DelConfirmButtonProps = {
  onDel: () => void
  loading?: boolean
  withText?: string
}

const DelConfirmButton: React.FC<
  DelConfirmButtonProps & React.HTMLAttributes<HTMLDivElement>
> = ({ className, onDel, loading, withText }) => {
  const [confirm, setConfirm] = useState(false)

  if (confirm) {
    return (
      <div className={clsx('flex items-center gap-2', className)}>
        <Button danger type='primary' onClick={() => onDel()} loading={loading}>
          Delete
        </Button>
        <Button onClick={() => setConfirm(false)}>Cancel</Button>
      </div>
    )
  }

  return (
    <div className={clsx('flex', className)}>
      <Button
        danger
        type='primary'
        icon={!!withText ? null : <DeleteOutlined />}
        onClick={() => setConfirm(true)}
      >
        {withText}
      </Button>
    </div>
  )
}

export default DelConfirmButton