import React from "react";
import { TabsContainer } from "./style/tabs.style";
import classNames from "classnames";

const Tabs = ({ options, selected, onChange = () => {} }) => {
  return (
    <TabsContainer>
      {options?.map((option) => {
        const checkedValue = option?.value;
        const checkedLabel = option?.label;
        return (
          <li
            key={checkedValue}
            className={classNames({
              active: checkedValue === selected,
            })}
            onClick={() => onChange(checkedValue)}
          >
            {checkedLabel}
          </li>
        );
      })}
    </TabsContainer>
  );
};

export default Tabs;
