import React from "react";
import styled from "styled-components";

const SectionSwitch = ({ options, onChange, gap, valueSelect }) => {
  return (
    <Container style={{ gap }}>
      {options?.map((i) => (
        <li
          className={`${valueSelect === i?.value ? "active" : ""} ${
            i?.disabled ? "disabled" : ""
          }`}
          onClick={() => {
            i?.onClick && i?.onClick();
            i?.disabled ? null : onChange(i?.value);
          }}
          key={i?.value}
        >
          {i?.label}
        </li>
      ))}
    </Container>
  );
};

export default SectionSwitch;

const Container = styled.ul`
  list-style: none;
  display: flex;
  align-items: center;
  gap: 22px;
  li {
    cursor: pointer;
    color: #adb2b2;
    font-size: 14px;
    font-weight: 700;
    line-height: 30.913px;
    position: relative;
    &.disabled {
      cursor: not-allowed;
    }
    &::before {
      position: absolute;
      content: "";
      display: block;
      width: 30.141px;
      height: 3.864px;
      background-color: transparent;
      left: 50%;
      transform: translateX(-50%);
      top: 26px;
    }

    &.active {
      color: #313333;
      &::before {
        background-color: #00c2c2;
      }
    }
  }
`;
