import React from "react";

import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
import { Button } from "./ui/button";
import {
  DialogActionTrigger,
  DialogCloseTrigger,
  DialogContent,
  DialogRoot,
  DialogTrigger,
} from "./ui/dialog";
import DeleteICN from '../assets/deleteIcon.png'

interface DeleteConfirmationDialogProps {
  onConfirm?: () => void;
  alertText?: string;
  alertCaption?: string;
  alertIcon?: any;
  AltertTiggerIcon?: any;
  button?: any;
  iconColor?: string;
}

const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
  onConfirm,
  alertText,
  alertCaption,
  AltertTiggerIcon,
  button,
  iconColor,
}) => {
  return (
    <DialogRoot
      placement={"center"}
      motionPreset="slide-in-bottom"
      size={"xs"}
      role="alertdialog"
    >
      <DialogTrigger asChild>
        {button ? (
          button
        ) : (
          <Icon
            cursor={"pointer"}
            p={0.5}
            _hover={{ bg: "#00000015" }}
            rounded={"md"}
            boxSize={5}
            color={iconColor && iconColor}
          >
            <AltertTiggerIcon />
          </Icon>
        )}
      </DialogTrigger>
      <DialogContent bgColor="#fff">
        {/* <DialogHeader display="flex" justifyContent="center"> */}
        {/* <Image src={alertIcon} h={"39px"} /> */}

        {/* </DialogHeader> */}
        <DialogBody
          display="flex"
          flexDirection="column"
          alignItems="center"
          color="black"
          p={8}
          gap={2}
        >
          {/* {alertIcon && alertIcon} */}
          <Image  w={'40px'} src={DeleteICN} />
          <Text
            mt={3}
            fontWeight={600}
            fontSize="sm"
            color="#000000"
            textAlign="center"
            as={"span"}
          >
            {alertText}
          </Text>
          <Text
            as={"span"}
            fontSize="sm"
            style={{ textAlign: "center", color: "#000000CC", width: "100%" }}
          >
            {" "}
            {alertCaption}
          </Text>
          <HStack mt={4} w={"100%"}>
            <DialogActionTrigger asChild>
              <Button
                width="50%"
                color="black"
                _hover={{ bgColor: "white" }}
                variant="outline"
                borderRadius="sm"
                border="1px solid black"
                size={"xs"}
              >
                No
              </Button>
            </DialogActionTrigger>
            <Button
              borderRadius="sm"
              width="50%"
              // bgColor="#007F33"
              bgColor={'#02A0A0'}
              color="white"
              // colorPalette="#007F33"
              onClick={onConfirm}
              size={"xs"}
            >
              Yes{" "}
            </Button>
          </HStack>
        </DialogBody>

        <DialogCloseTrigger
          _hover={{ bg: "#00000010" }}
          color={"#000"}
          colorPalette={"bg"}
        />
      </DialogContent>
    </DialogRoot>
  );
};

export default AlertDailog;
