import * as Dialog from '@radix-ui/react-dialog'
import { AlertTriangle, X } from 'lucide-react'

import './ConfirmDangerDialog.scss'

type ConfirmDangerDialogProps = {
  open: boolean
  title: string
  description: string
  confirmText?: string
  cancelText?: string
  isLoading?: boolean
  onOpenChange: (open: boolean) => void
  onConfirm: () => void
}

export function ConfirmDangerDialog({
  open,
  title,
  description,
  confirmText = 'Удалить',
  cancelText = 'Отмена',
  isLoading = false,
  onOpenChange,
  onConfirm,
}: ConfirmDangerDialogProps) {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="confirm-danger-dialog__overlay" />

        <Dialog.Content className="confirm-danger-dialog">
          <div className="confirm-danger-dialog__header">
            <div className="confirm-danger-dialog__icon">
              <AlertTriangle size={22} />
            </div>

            <Dialog.Close
              className="confirm-danger-dialog__close"
              type="button"
            >
              <X size={20} />
            </Dialog.Close>
          </div>

          <Dialog.Title className="confirm-danger-dialog__title">
            {title}
          </Dialog.Title>

          <Dialog.Description className="confirm-danger-dialog__description">
            {description}
          </Dialog.Description>

          <div className="confirm-danger-dialog__footer">
            <Dialog.Close
              className="confirm-danger-dialog__cancel"
              type="button"
              disabled={isLoading}
            >
              {cancelText}
            </Dialog.Close>

            <button
              className="confirm-danger-dialog__confirm"
              type="button"
              disabled={isLoading}
              onClick={onConfirm}
            >
              {isLoading ? 'Удаление...' : confirmText}
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  )
}