import React from "react";

import {
  DialogActionTrigger,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../../components/ui/dialog";
import { RiDeleteBin5Line } from "react-icons/ri";
import { DialogBody, Image, Text } from "@chakra-ui/react";
import { Button } from "../../../../components/ui/button";
import DelteIcon from "../../../../assets/icons/delete.png";

interface DeleteConfirmationDialogProps {
  onConfirm: () => void;
}

const DeleteConfirmationDialog: React.FC<DeleteConfirmationDialogProps> = ({
  onConfirm,
}) => {
  return (
    <DialogRoot role="alertdialog">
      <DialogTrigger asChild>
        <RiDeleteBin5Line cursor="pointer" size="18px" />
      </DialogTrigger>
      <DialogContent bgColor="#fff">
        <DialogHeader display="flex" justifyContent="center">
          {/* <DialogTitle>Are you sure?</DialogTitle> */}

          <Image src={DelteIcon} h={"80px"} width="64.97px" />
        </DialogHeader>
        <DialogBody
          display="flex"
          flexDirection="column"
          alignItems="center"
          color="black"
        >
          <Text
            fontWeight={600}
            fontSize="md"
            color="#000000"
            textAlign="center"
          >
            Delete User
          </Text>
          <p style={{ textAlign: "center", color: "#000000CC", width: "30%" }}>
            {" "}
            Are you sure you want to delete this user
          </p>
        </DialogBody>
        <DialogFooter width="100%">
          <DialogActionTrigger asChild>
            <Button
              width="50%"
              color="black"
              _hover={{ bgColor: "white" }}
              variant="outline"
              borderRadius="94px"
            >
              No
            </Button>
          </DialogActionTrigger>
          <Button
            borderRadius="94px"
             width="50%"
            colorPalette="teal"
            onClick={onConfirm}
          >
            Yes{" "}
          </Button>
        </DialogFooter>
        <DialogCloseTrigger />
      </DialogContent>
    </DialogRoot>
  );
};

export default DeleteConfirmationDialog;
