import { useButtonState } from '../../zustand/ButtonState';

const CheckoutTabs = ({ activeButton, setActiveButton }: any) => {

  const { setActiveTab } = useButtonState((state) => state);

  // Function to handle button click
  const handleButtonClick = (index: number) => {
    setActiveButton(index);
    setActiveTab(index);
  };
  const {t} = useTranslation();
  const buttonLabels = [
    t("All"),
    t("lighting"),
    t("Automation"),
  ];

  return (
    <div className='checkout_button_tabs'>
      {buttonLabels.map((label, index) => (
      <button
        key={index}
        className={activeButton === index ? "Activebutton" : "button"}
        onClick={() => handleButtonClick(index)}
      >
        {label}
      </button>
    ))}</div>
  )
}

export default CheckoutTabs