import { Box, Button, Image, Text, VStack } from "@chakra-ui/react";
import React, { useEffect, useRef } from "react";
import VanillaTilt from "vanilla-tilt"; // Ensure this is imported
import mobilepng from "../../../assets/mobileCard.png";
import cardfooter from "../../../assets/cardFooter.png";
import cardfooter2 from "../../../assets/cardFooter2.png";
import cardfooter3 from "../../../assets/cardFooter3.png";

const cards = [
  {
    title: "Save More",
    subtitle: "Digital Gift Card",
    description:
      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
    image: mobilepng,
    img: cardfooter,
    link: "/dashboard/apply-for-giftcards/apply-for-digitalcard",
  },
  {
    title: "Save More",
    subtitle: "Physical Gift Card",
    description:
      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
    img: cardfooter2,
  },
  {
    title: "Save More",
    subtitle: "Insta Gift Card",
    description:
      "Choose a plan and get onboard in minutes. Then get $100 credits for your next payment.",
    img: cardfooter3,
  },
];

const SelectCard = () => {
  const tiltRefs = useRef([]);

  useEffect(() => {
    tiltRefs.current.forEach((node) => {
      if (node) {
        VanillaTilt.init(node, {
          max: 13,
          speed: 700,
          glare: true,
          scale: 1.05,
          "max-glare": 0.5,
          onEnter: () => {
            node.style.zIndex = 10; // Bring to top on hover
          },
          onLeave: () => {
            node.style.zIndex = 1; // Reset zIndex after hover
          },
        });
      }
    });

    // Cleanup VanillaTilt instances on unmount
    return () => {
      tiltRefs.current.forEach((node) => {
        if (node?.vanillaTilt) {
          node.vanillaTilt.destroy();
        }
      });
    };
  }, [tiltRefs]);

  return (
    <Box p={4}>
      <Text color="#000000" fontWeight={600} fontSize="small">
        Select card type
      </Text>

      <Box display="flex" justifyContent="center" gap={4}>
        {cards.map((card, index) => (
          <Box
            key={index}
            ref={(el) => (tiltRefs.current[index] = el)}
            bgGradient="linear-gradient(180deg, #6311CB 0%, #1F1584 100%)"
            color="white"
            borderRadius="lg"
            overflow="hidden"
            width={{ base: "100%", md: "300px" }}
            padding={6}
            textAlign="center"
            boxShadow="lg"
            position="relative"
          >
            <VStack
              h="373px"
              alignItems="flex-start"
              spacing={4}
              position="relative"
            >
              <Button
                p={4}
                bgColor="transparent"
                border="1px solid #fff"
                color="#fff"
                fontSize="small"
                _hover={{ bgColor: "transparent", color: "white" }}
              >
                Select
              </Button>

              <Text as="span" fontSize="large">
                {card.title}
              </Text>

              <Text as="span" fontSize="large">
                {card.subtitle}
              </Text>

              <Text as="span" fontSize="small" textAlign="start">
                {card.description}
              </Text>

              {card.image && (
                <Image
                  src={card.image}
                  h="190px"
                  objectFit="cover"
                  position="absolute"
                  bottom="-1.5rem"
                  right="-1.5rem"
                  borderRadius="md"
                />
              )}

              {card.img && (
                <Image
                  src={card.img}
                  h="111px"
                  objectFit="cover"
                  position="absolute"
                  bottom="-1.5rem"
                  left="-1.5rem"
                  borderRadius="md"
                />
              )}
            </VStack>
          </Box>
        ))}
      </Box>
    </Box>
  );
};

export default SelectCard;
