import React from "react";
import { TicketsTabStyled } from "./TicketsTab.style";

const TicketsTab = ({ text, id, setValueTab, valueTab }) => {
  const [active, setActive] = React.useState(false);

  const handleClick = ({ target }) => {
    setValueTab(target.id);
  };

  React.useEffect(() => {
    valueTab === id ? setActive(true) : setActive(false);
  }, [valueTab, id]);
  return (
    <TicketsTabStyled
      id={id}
      valueTab={valueTab}
      onClick={handleClick}
      className={active ? "active" : ""}
    >
      {text}
    </TicketsTabStyled>
  );
};

export default TicketsTab;