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";
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 = () => {
  return (
    <>
      <div className="what-we-do-area ptb-100">
        <Container>
          <Row className="align-items-center">
            <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="/images/home/knowledge.webp"
                    fill
                    className="img-fluid image"
                    alt="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="Knowledge" className="h2" />
                <span>
                  Knowledge is the cornerstone of Advith. We read & research,
                  not only to deliver but primarily to learn with a view to
                  achieve a 360º perspective on various subjects.
                </span>
                <Tabs>
                  <TabList>
                    {KnowledgeData.map((tab, index) => (
                      <Tab key={index}>{tab.title}</Tab>
                    ))}
                  </TabList>

                  {KnowledgeData.map((tab, index) => (
                    <TabPanel key={index}>
                      <p>{tab.content}</p>
                      <Link href="{tab.buttonlink}" className="default-btn">
                        Know More <i className="ri-arrow-right-line"></i>
                      </Link>
                    </TabPanel>
                  ))}
                </Tabs>
              </div>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
};

export default AboutContent;