/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import {
  Box,
  Card,
  CardBody,
  CardHeader,
  Container,
  Heading,
  Image,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import React, { useState } from "react";
import CommCard from "../Card/CommCard";
import imgOne from "../../assets/images/Component115.png";
import imgtwo from "../../assets/images/Component116.png";
import imgthree from "../../assets/images/Component117.png";
import imgfour from "../../assets/images/Component118.png";
import imgfive from "../../assets/images/Component119.png";
import imgsix from "../../assets/images/Component120.png";
import imgseven from "../../assets/images/Component121.png";
import imgeight from "../../assets/images/Component122.png";
import imgnine from "../../assets/images/Component123.png";
import imgten from "../../assets/images/Component128.png";
import imgeleven from "../../assets/images/Component127.png";
import imgtweleve from "../../assets/images/vivek.jpeg";
import { useEffect } from "react";
import axios from "axios";
import { useGetCommunitiesQuery } from "../../Redux/slice/communitySlice";
import Loader from "../Loader/Loader";

const individuals = [
  {
    name: "KC Reddy",
    jobTitle: "Founder/CTO",
    description:
      "A visionary poised to deliver trustless, secure internet and passwordless cyber security",
    imageUrl: imgOne,
    link: `https://www.linkedin.com/in/kc-reddy-767a3463/`,
  },
  {
    name: "Vivek Tikoo",
    jobTitle: "CEO",
    description:
      "Thought Leader in Web3 enabled Digital transformation with passion for execution.",
    imageUrl: imgtweleve,
    link: `https://www.linkedin.com/in/vivektikoo/`,
  },
  {
    name: "Ravi Srinivasa Murty",
    jobTitle: "Chief Strategy Officer",
    description:
      "Global business leader with a technology orientation and a vision to drive economic value.",
    imageUrl: imgtwo,
    link: `https://www.linkedin.com/in/ravi-srinivasa-murty-7a46041/`,
  },
  {
    name: "Hari Krishnan",
    jobTitle: "Head of Technology",
    description:
      "Deeply passionate about Cryptography, Zero Knowledge Proofs, and Number Theory.",
    imageUrl: imgthree,
    link: `https://www.linkedin.com/in/hari-krishnan-1691b6120/`,
  },
  {
    name: "Eser Torun, CFA",
    jobTitle: "Chief Growth Officer",
    description:
      "Expert at balancing risk-taking with sound business judgment in decision-making.",
    imageUrl: imgten,
    link: `https://www.linkedin.com/in/eser-torun-cfa?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
  },
  {
    name: "Gokul P S",
    jobTitle: "Core Blockchain Developer",
    description:
      "A proactive Web3 enthusiast ensuring the security and scalability of our 51.4M proofchains.",
    imageUrl: imgfour,
    link: `https://www.linkedin.com/in/gokul-p-s-3a8445130/`,
  },
  {
    name: "Allen Iype P Cherian",
    jobTitle: "Blockchain Engineer",
    description:
      "A motivated and responsible B tech Graduate, with a strong work ethic.",
    imageUrl: imgfive,
    link: `https://www.linkedin.com/in/allen-iype-p-cherian/`,
  },
  {
    name: "Nidhin M.",
    jobTitle: "Lead Engineer",
    description:
      "Developed revolutionary PoP protocol, P2P data transfer and transaction processing functions.",
    imageUrl: imgsix,
    link: `https://www.linkedin.com/in/nidhinmahesh/`,
  },
  {
    name: "Arnab Ghose",
    jobTitle: "Senior Blockchain Engineer",
    description:
      "Master at handling complex tasks and gives 100% effort all the time.",
    imageUrl: imgeleven,
    link: `https://www.linkedin.com/in/arnabghose997?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=ios_app`,
  },
  {
    name: "Ashita Gupta",
    jobTitle: "Blockchain Developer",
    description:
      "Enthusiastic blockchain developer who pushes herself every day to excel at work.",
    imageUrl: imgseven,
    link: `https://www.linkedin.com/in/ashita-gupta-5a0827167/`,
  },
  {
    name: "Vaishnav C H",
    jobTitle: "Blockchain Developer",
    description:
      "A very humble and talented Golang developer and mechatronics and blockchain engineer",
    imageUrl: imgeight,
    link: `https://www.linkedin.com/in/vaishnav-c-h-134053221/`,
  },
  {
    name: "Maneesha Panda",
    jobTitle: "Blockchain Engineer",
    description:
      "A highly keen blockchain engineer with a zeal for innovation who brings new ideas to the table.",
    imageUrl: imgnine,
    link: `https://www.linkedin.com/in/maneesha-panda/`,
  },
];

const CommunityCard = () => {
  const { data, error, isLoading } = useGetCommunitiesQuery();
  const [state, setState] = useState();
  const profile = data?.data?.data;
  console.log(data?.data?.data);
  useEffect(() => {}, []);

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <Box backgroundColor={"#101015"}>
          <Container
            maxW={"1200px"}
            padding={"0rem"}
            paddingBottom={"6rem"}
            sx={{
              "@media (max-width: 1024px)": {
                padding: "3rem",
              },
              "@media (max-width: 435px)": {},
            }}
          >
            <Text
              as={"h2"}
              paddingTop={"4rem"}
              paddingBottom={"4rem"}
              fontWeight={700}
              fontSize={"38px"}
              textAlign={"center"}
              textTransform={"capitalize"}
              color={"#fff"}
              id="rubix-community"
              sx={{
                "@media (max-width: 435px)": {
                  fontSize: "35px",
                },
                "@media (max-width: 375px)": {
                  fontSize: "28px",
                  textAlign: "center",
                },
              }}
            >
              Rubix Community
            </Text>
            <SimpleGrid
              spacing={"50px"}
              templateColumns="repeat(auto-fill, minmax(230px, 1fr))"
            >
              {/* {individuals.map((item) => (
                <CommCard
                  key={item.id}
                  location={item.location}
                  name={item.name}
                  jobTitle={item.jobTitle}
                  description={item.description}
                  imageUrl={item.imageUrl}
                  link={item.link}
                  item.profile_image
                />
              ))} */}
              {profile.map((item) => (
                <CommCard
                  key={item.id}
                  description={item.description}
                  designation={item.designation}
                  name={item.member_name}
                  img={`https://rubix.betadelivery.com/${item.profile_image}`}
                  link={item.linkedin}
                />
              ))}
            </SimpleGrid>
          </Container>
        </Box>
      )}
    </>
  );
};

export default CommunityCard;