import React from "react";
import Link from "next/link";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import Image from "next/image";
import { motion } from "framer-motion";
import { fadeIn } from "../../components/reuseables/variants";
import Heading from "@/components/reuseables/Heading";
import { Col, Container, Row } from "react-bootstrap";
// import knowledge from "@/pages/knowledge";
import index from "@/pages/career";
import { cleanImage } from "@/layout/imageHandling";
const KnowledgeData = [
  {
    title: "Corpedia",
    content:
      "Get the scoop on India's corporate legal happenings with Corpedia, your go-to source for updates and analysis.",
    buttonlink: "/corpedia",
  },
  {
    title: "Tax Wire",
    content:
      "Navigating the complex terrain of India's tax landscape? TaxWire is your reliable companion, serving up the latest news, developments, and insights to help you stay informed and in the know.",
    buttonlink: "/taxwire",
  },
  {
    title: "Budget Panorama",
    content:
      "Budget Panorama is an annual edition released soon after the Union budget is presented by the Finance Minister of India. Budget Panorama gives a panoramic view of the recently announced budget with the objective of educating the audience.",
    buttonlink: "/budgetpanorama",
  },
];

const AboutContent = ({ Knowledges, KnowledgeTab }) => {
  // console.log(Knowledges, "Knowledgeshack");
  // console.log(KnowledgeTab, "KnowledgeTab");
  return (
    <div className="what-we-do-area pt-100">
      <Container>
        <Row className="align-items-center flex-column-reverse flex-lg-row">
          <Col lg={6} md={12}>
            <div className="what-we-do-image">
              <motion.div
                variants={fadeIn(0.4)}
                initial={"hidden"}
                whileInView={"show"}
                viewport={{ once: false, amount: 0.2 }}
              >
                <Image
                  src={cleanImage(Knowledges?.Image?.url)}
                  fill
                  className="img-fluid image"
                  alt={Knowledges?.Image?.alternativeText? Knowledges?.Image?.alternativeText : "image"}
                />
              </motion.div>
              <Image
                width={200}
                height={150}
                src="/images/shape/shape8.png"
                alt="image"
                className="shape"
              />
            </div>
          </Col>

          <Col lg={6} md={12}>
            <div className="what-we-do-content">
              <Heading el="h2" heading="Knowledgeshack" className="h2" />
              <span>{Knowledges?.Description}</span>

              <Tabs>
                <TabList>
                  {KnowledgeTab &&
                    KnowledgeTab?.map((item, index) => {
                      // console.log("KnowledgeTab", item);
                      return <Tab key={index}>{item.Title}</Tab>;
                    })}
                </TabList>

                {KnowledgeTab &&
                  KnowledgeTab?.map((item, index) => {
                    // console.log("KnowledgeTab", item);
                    return (
                      <TabPanel key={index}>
                        <p>{item.Description}</p>
                        {item?.CTA && (
                          <Link
                            href={item?.CTA?.URL ? item?.CTA?.URL : "#"}
                            className="default-btn mb-3 mb-md-0"
                          >
                            Know More
                            <i className="ri-arrow-right-line"></i>
                          </Link>
                        )}
                      </TabPanel>
                    );
                  })}
              </Tabs>
            </div>
          </Col>
        </Row>
      </Container>
    </div>
  );
};

export default AboutContent;