import React from "react";
import { Tab, TabList } from "react-tabs";

const IndustrySidebar = ({ title, services, selectedIndex, setSelectedIndex }) => {
  return (
    <div className="widget-area">
      <div className="widget widget_service_categories">
        <h3 className="widget-title">{title}</h3>
        <TabList>
          {services.map((service, index) => (
            <Tab key={index} onClick={() => setSelectedIndex(index)} selected={selectedIndex === index}>
              <span>   {service.name}</span>
              <i className="ri-arrow-right-s-line"></i>
            </Tab>
          ))}
        </TabList>
      </div>
    </div>
  );
};

export default IndustrySidebar;