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

import BadgeComponent from "../../../../Base/Badge/BadgeComponent";

const TicketsTab = ({ text, id, setValueTab, valueTab, count }) => {
  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}
      {id !== "open" ? (
        <BadgeComponent
          counter={count}
          position="absolute"
          right="4px"
          top="6px"
          fontSize="12px"
          bgcolor={id === "pending" ? color.status.warning : color.status.no}
        />
      ) : (
        ""
      )}
    </TicketsTabStyled>
  );
};

export default TicketsTab;