import Image from "next/image"
import Dialog from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import EmptyTrash from "@/public/main-page/empty-trash.svg"

interface DeleteConfirmationDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onConfirm?: () => void
  isLoading?: boolean
}

const DeleteConfirmationDialog = ({
  open,
  onOpenChange,
  onConfirm,
  isLoading = false
}: DeleteConfirmationDialogProps) => {
  return (
    <Dialog
      open={open}
      onOpenChange={onOpenChange}
      title="حذف الطلب"
      showDialogCloseButton={!isLoading}
    >
      <div className="p-4 flex flex-col items-center justify-center gap-6">
        {/* The Image from the design */}
        <Image
          src={EmptyTrash}
          alt="empty-trash"
          width={180}
          height={180}
        />

        <div className="text-center">
          <h5 className="text-[#1D293D] text-xl font-medium">
            هل أنت متأكد من حذف هذا العنصر؟
          </h5>
          <p className="text-[#62748E] mt-2">
            لا يمكن التراجع عن هذا الإجراء بعد الحذف.
          </p>
        </div>

        <div className="flex items-center justify-center gap-2 w-full">
          <Button
            onClick={onConfirm}
            disabled={isLoading}
            variant="destructive"
            className="px-12 py-5 text-base font-normal rounded-full min-w-[140px]"
          >
            {isLoading ? (
              <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
            ) : (
              "حذف"
            )}
          </Button>

          <Button
            onClick={() => onOpenChange(false)}
            disabled={isLoading}
            variant="outline"
            className="px-12 py-5 text-base font-normal rounded-full min-w-[140px]"
          >
            إلغاء
          </Button>
        </div>
      </div>
    </Dialog>
  )
}

export default DeleteConfirmationDialog