'use client'

import { Alert, Button, Modal, ModalBody, ModalHeader } from 'flowbite-react'
import { HiOutlineExclamationCircle } from 'react-icons/hi'

import modalTheme from '@/lib/themes/modal'
import buttonTheme from '@/lib/themes/button'
import { ReferralLink } from '../types'

interface DeleteModalProps {
  isOpen: boolean
  referralLink: ReferralLink | null
  isDeleting: boolean
  onClose: () => void
  onConfirm: () => void
}

export default function DeleteModal({
  isOpen,
  referralLink,
  isDeleting,
  onClose,
  onConfirm,
}: DeleteModalProps) {
  return (
    <Modal
      show={isOpen}
      size="md"
      onClose={onClose}
      popup
      theme={modalTheme.modal}
    >
      <ModalHeader />
      <ModalBody>
        <div className="text-center">
          <HiOutlineExclamationCircle className="mx-auto mb-4 h-12 w-12 text-red-600" />
          <h3 className="mb-5 text-lg font-normal text-slate-600">
            Are you sure to delete referral link{' '}
            <b className="text-black">{referralLink?.link_name}</b>?
          </h3>

          <Alert color="warning" className="mb-5">
            <span>
              Deleting this referral link will also remove it from all partners
              assigned to it. This action cannot be undone.{' '}
              <b>{referralLink?.partners?.length} partners will be affected.</b>
            </span>
          </Alert>

          <div className="flex justify-center gap-3">
            <Button
              color="red"
              theme={buttonTheme.button}
              onClick={onConfirm}
              disabled={isDeleting}
            >
              {isDeleting ? 'Deleting…' : 'Delete'}
            </Button>
            <Button
              color="alternative"
              theme={buttonTheme.button}
              onClick={onClose}
              disabled={isDeleting}
            >
              Cancel
            </Button>
          </div>
        </div>
      </ModalBody>
    </Modal>
  )
}