import React from "react";
import Link from "next/link";
import { Tab, Tabs, TabList, TabPanel, resetIdCounter } from "react-tabs";

const TabContentSection = ({
  sectionTitle,
  sectionSubtitle,
  tabData,
  mainImage,
  shapeImage,
  buttonText,
  buttonLink,
}) => {
  return (
    <>
      <div className="what-we-do-area ptb-100">
        <div className="container">
          <div className="row align-items-center">
            <div className="col-lg-6 col-md-12">
              <div className="what-we-do-image">
                <img src={mainImage} alt="main" />
                <img src={shapeImage} alt="shape" className="shape" />
              </div>
            </div>

            <div className="col-lg-6 col-md-12">
              <div className="what-we-do-content">
                <span className="sub-title">{sectionSubtitle}</span>
                <h2>{sectionTitle}</h2>

                <Tabs>
                  <TabList>
                    {tabData.map((tab, index) => (
                      <Tab key={index}>{tab.tabTitle}</Tab>
                    ))}
                  </TabList>

                  {tabData.map((tab, index) => (
                    <TabPanel key={index}>
                      <p>{tab.content}</p>
                    </TabPanel>
                  ))}
                </Tabs>

                <Link href={buttonLink} className="default-btn">
                  {buttonText} <i className="ri-arrow-right-line"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default TabContentSection;