'use client';

import { useState } from 'react';
import { useGlobalContext } from '@/context/GlobalContext';

const ToggleSwitcher = ({ 
  switchOneLabel, 
  switchTwoLabel, 
  switchThreeLabel, 
  switchFourLabel, 
  switchFiveLabel, 
  onSwitchSelect 
}) => {
  const { darkMode } = useGlobalContext(); 
  const [activeSwitch, setActiveSwitch] = useState('one');

  const handleSwitch = (switchType, tag) => {
    setActiveSwitch(switchType);
    onSwitchSelect(tag); 
  };

  return (
    <div className='rounded-[4px] w-full max-w-screen-2xl overflow-hidden'>
      <div className='flex mx-auto justify-around text-[16px] border-[1px] dark:border-[#444444] rounded-[6px] font-medium'>
        <button
          onClick={() => handleSwitch('one', "All")}
          className={activeSwitch === 'one' ? "flex p-[10px] px-[2rem] border-none bg-gradient-to-r from-[#1E998F] to-[#B0CF89] rounded-ss-[6px] dark:border-[#444444] rounded-bl-[6px] text-white" : "flex p-[10px] dark:border-[#444444] px-[2rem] border-none cursor-pointer text-center"}
        >
          {switchOneLabel}
        </button>
        <button
          onClick={() => handleSwitch('two', "E-Commerce")}
          className={activeSwitch === 'two' ? "flex-1 p-[10px] border-none bg-gradient-to-r  from-[#1E998F] dark:border-[#444444] to-[#B0CF89] border-l-[1px] border-r-[1px] w-[400px] text-white" : "flex-1 p-[10px] border-l-[1px] dark:border-[#444444]  border-r-[1px] cursor-pointer text-center"}
        >
          {switchTwoLabel}
        </button>
        <button
          onClick={() => handleSwitch('three', "Fuel")}
          className={activeSwitch === 'three' ? "flex-1 p-[10px] border-none bg-gradient-to-r from-[#1E998F] dark:border-[#444444] to-[#B0CF89] border-l-[1px] border-r-[1px] text-white" : "flex-1 p-[10px] border-l-[1px] dark:border-[#444444] border-r-[1px] cursor-pointer text-center"}
        >
          {switchThreeLabel}
        </button>
        <button
          onClick={() => handleSwitch('four', "Stock Marketing")}
          className={activeSwitch === 'four' ? "flex-1 p-[10px] border-none bg-gradient-to-r from-[#1E998F] dark:border-[#444444] to-[#B0CF89] border-l-[1px] border-r-[1px] text-white" : "flex-1 p-[10px] border-l-[1px] dark:border-[#444444] border-r-[1px] cursor-pointer text-center"}
        >
          {switchFourLabel}
        </button>
        <button
          onClick={() => handleSwitch('five', "Internet Service")}
          className={activeSwitch === 'five' ? "flex-1 p-[10px] border-none bg-gradient-to-r from-[#1E998F] dark:border-[#444444] to-[#B0CF89]  rounded-tr-[6px] rounded-br-[6px]  text-white" : "flex-1 p-[10px] border-none dark:border-[#444444] cursor-pointer text-center"}
        >
          {switchFiveLabel}
        </button>
      </div>
    </div>
  );
};

export default ToggleSwitcher;