import {
  Button,
  Flex,
  HStack,
  Image,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  Stack,
  Text
} from "@chakra-ui/react";
import React from "react";
import {Offer} from "../intefaces/interfaces";

function CustomOffer(props: Offer) {
    const {open, title, validity, description, productName, offerImage, logo, redeem} =
        props;

    return (
        <>
            <Modal size={"xl"} isOpen={open} onClose={props.close}>
                <ModalOverlay/>
                <ModalContent>
                    <ModalHeader>
                        <Text
                            textAlign="left"
                            className="interFonts"
                            fontWeight="700"
                            color="black"
                            fontSize="17px"
                            lineHeight="20.57px"
                        >
                            {title}
                        </Text>
                    </ModalHeader>
                    <ModalCloseButton/>
                    <ModalBody p="0">
                        <Flex justify="center" align="center" h="auto" w="100%">
                            <Stack h="100%" spacing="0px">
                                <Flex bg="white" align="center" justify="center">
                                    <Image
                                        h="55px"
                                        w="228px"
                                        left="606px"
                                        top="175px"
                                        border-radius="0px"
                                        src={logo}
                                    />
                                </Flex>

                                <Image
                                    height="426px"
                                    width="100%"
                                    left="407px"
                                    top="231px"
                                    border-radius="0px"
                                    src={offerImage}
                                />

                                <Flex
                                    bg="white"
                                    align="center"
                                    justify="center"
                                    pt="24px"
                                    mx="59px"
                                >
                                    <Text
                                        fontFamily="Inter"
                                        fontSize="16px"
                                        fontStyle="normal"
                                        fontWeight="500"
                                        lineHeight="18px"
                                        letterSpacing="0em"
                                        textAlign="center"
                                    >
                                        Here’s a little gift from us for purchasing{" "}
                                        <Text
                                            as="span"
                                            fontFamily="Inter"
                                            fontSize="16px"
                                            fontStyle="normal"
                                            fontWeight="700"
                                            lineHeight="18px"
                                            letterSpacing="0em"
                                            textAlign="center"
                                        >
                                            {" "}
                                            {productName}.{" "}
                                        </Text>
                                    </Text>
                                </Flex>

                                <Flex
                                    bg="white"
                                    align="center"
                                    justify="center"
                                    pt="36px"
                                    mx="59px"
                                    pb="26px"
                                >
                                    <Text
                                        fontFamily="Inter"
                                        fontSize="27px"
                                        fontStyle="normal"
                                        fontWeight="700"
                                        lineHeight="18px"
                                        letterSpacing="0em"
                                        textAlign="center"
                                    >
                                        {description}
                                    </Text>
                                </Flex>
                                <Flex
                                    align="center"
                                    justify="center"
                                    //   pt="36px"
                                >
                                    <Button
                                        variant="outline"
                                        bg="black"
                                        color="white"
                                        h="59px"
                                        w="263px"
                                        borderRadius="57px"
                                        _hover={{bg: "black"}}
                                        onClick={redeem}
                                    >

                                        Redeem
                                    </Button>
                                </Flex>

                                {/* LAST */}
                                <Flex
                                    bg="white"
                                    align="center"
                                    justify="center"
                                    pt="24px"
                                    mx="59px"
                                >
                                    <Text
                                        fontFamily="Inter"
                                        fontSize="11px"
                                        fontStyle="normal"
                                        fontWeight="500"
                                        lineHeight="18px"
                                        letterSpacing="0em"
                                        textAlign="center"
                                    >
                                        Valid until {validity}. By redeeming this code you agree to
                                        the
                                        <Text
                                            as="span"
                                            fontFamily="Inter"
                                            fontSize="11px"
                                            fontStyle="normal"
                                            fontWeight="500"
                                            lineHeight="18px"
                                            letterSpacing="0em"
                                            textAlign="center"
                                            color="#f9dca5"
                                            cursor="pointer"
                                        >
                                            {" "}
                                            T&Cs.
                                        </Text>
                                    </Text>
                                </Flex>
                            </Stack>
                        </Flex>
                    </ModalBody>

                    <ModalFooter>
                        <HStack spacing="6px">
                            {/* <Button
                                  isLoading={isSaving}
                                  onClick={save}
                                  fontWeight="700"
                                  fontSize="12px"
                                  color="white"
                                  border="1px"
                                  className="interFonts"
                                  w="76px"
                                  h="28px"
                                  bg="#009CC4"
                                  alignSelf="flex-end"
                                  borderRadius="2.89px"
                                  _hover={{color: "#009CC4", bg: "white", border: "1px solid #009CC4"}}

                              >
                                  Save
                              </Button> */}
                        </HStack>
                    </ModalFooter>
                </ModalContent>
            </Modal>
        </>
    );
}

export default CustomOffer;