/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import LearnCard from "../Card/LearnCard";
import chainx from "../../assets/images/LearnCard2.png";
import ensurity from "../../assets/images/LearnCard4.png";
import exr from "../../assets/images/LearnCard5.png";
import finalo from "../../assets/images/LearnCard1.png";
import jupiter from "../../assets/images/LearnCard3.png";
import { useMediaQuery } from "@chakra-ui/react";
import { useGetpartnerCardQuery } from "../../Redux/slice/learPageSlice";
import DevCards from "../Card/DevCards";

// import { Badge } from "@chakra-ui/react";

const content = [
  {
    id: 2,
    src: ensurity,
    alt: "Ensurity",
    text: `Building solutions for an easier transition from Web2 to Web3 for global enterprises with a focus on public sector companies.`,
    href: `https://www.ensurity.com/`,
  },

  {
    id: 4,
    src: finalo,
    alt: "Finalo Education",
    text: `Delivers KYC/DID solutions for banks, and financial institutions, a highly secure algorithm for quantum security and a password-less authentication process for secure scaling`,
    href: `https://www.finaoeducation.com/`,
  },
  {
    id: 5,
    src: jupiter,
    alt: "Jupiter",
    text: `Mobile-based wallet that generates and stores private keys on a mobile device`,
    href: `https://jupitermeta.io/`,
  },
  {
    id: 3,
    src: exr,
    alt: "EXR",
    text: `A metaverse, XR, and Web3 entity offering solutions that infuse gamification and tokenomics.`,
    href: `https://getfexr.com/`,
  },
  {
    id: 1,
    src: `${chainx}`,
    alt: "ChainX",
    text: `Building a Web3 infrastructure to support nonprofit communities, starting with YMCA`,
  },
];

const Content = {
  heading: `Enabling developers across a variety`,
  span: `of applications`,
};

const LearnDev = () => {
  const [isSmallScreen] = useMediaQuery("(max-width: 996px)");
  const { data, isLoading, error } = useGetpartnerCardQuery();
  const partnerCard = data?.data?.data;
  console.log(partnerCard);
  return (
    <Box
      // height={"100vh"}
      background={"#000"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      padding={"2rem 0 4rem 0"}
    >
      <Text
        as={"h2"}
        paddingTop={"2rem"}
        paddingBottom={"2rem"}
        paddingLeft={"7rem"}
        fontWeight={700}
        fontSize={"40px"}
        textAlign={"left"}
        textTransform={"capitalize"}
        color={"#fff"}
        width={"fit-content"}
        sx={{
          "@media (max-width: 500px)": {
            fontSize: "22px",
            fontWeight: "400",
            marginBottom: "30px",
            padding: "1rem",
            paddingBottom: "0px",
          },
        }}
      >
        {Content.heading} {isSmallScreen ? null : <br />}
        {Content.span}
      </Text>
      <Box
        // maxW="container.xl"
        paddingLeft={"6rem"}
        paddingBottom={"2rem"}
        // height={"50vh"}
        sx={{
          "@media (max-width: 600px)": {
            padding: "1rem",
          },
        }}
      >
        <Box
          display={"flex"}
          alignItems={"center"}
          gap={"25px"}
          overflowX={"auto"}
          overflowY={"auto"}
          sx={{
            "&::-webkit-scrollbar": {
              width: "0px",
            },
          }}
        >
          {partnerCard?.map((item) => (
            <LearnCard
              key={item.id}
              src={item.company_logo}
              // alt={item.alt}
              text={item.description}
              href={item.website_link}
            />
          ))}
          {/* {content.map((item) => (
            <DevCards
              key={item.id}
              src={item.src}
              alt={item.alt}
              text={item.text}
              href={item.href}
            />
          ))} */}
        </Box>
      </Box>
    </Box>
  );
};

export default LearnDev;