tabs.jsx

import React, { useState } from 'react';
import Rules from './PolicyTabs/Rules';
import Details from './PolicyTabs/Details'
import { Link } from 'react-router-dom';
import './pages.css';
import Providers from './PolicyTabs/Providers';
import Insurers from './PolicyTabs/Insurers';
import IncExclusions from './PolicyTabs/IncExclusions';
import Benefits from './PolicyTabs/Benefits';
import FamilyStructure from './PolicyTabs/FamilyStructure';
import FundPayment from './PolicyTabs/FundPayment';
import SLA from './PolicyTabs/SLA';

const Tab = ({ label, isActive, onClick, data }) => (
  <div
    className={`tab ${isActive ? 'active' : ''}`}
    onClick={onClick}
  >
    {label}
  </div>
);

const tabComponents = [
    // Here is where you include components
    <Details  data={data}/>,
    <Rules data={data}/>,
    <Providers data={data}/>,
    <Insurers />,
    <IncExclusions />,
    <Benefits />,
    <FamilyStructure />,
    <FundPayment />,
    <SLA />,
  ];

const Tabs = ({ tabNames, data }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
  };


  return (
    <div className="tabs-container">
      <div className="tabs">
        {tabNames.map((tab, index) => (
          <Link key={index} to={tab.toLowerCase()}>
            <Tab
              label={tab}
              isActive={index === activeTab}
              onClick={() => handleTabClick(index)}
            />
          </Link>
        ))}
      </div>
      <div className="tab-content">
        {tabComponents[activeTab]}
      </div>
    </div>
  );
};

export default Tabs;