import { TabButtonContainer, TabButtonStyle } from "./TabButton.styled";

export type TabButtonProps = {
  children: string[];
  onClick: (index: number) => void;
  isSelectedIndex?: number;
  disable?: boolean;
  color?: string;
  backgroundColor?: string;
};

const TabButton = ({
  children,
  onClick,
  isSelectedIndex,
  disable = false,
  backgroundColor = "",
  color = "",
}: TabButtonProps) => {
  return (
    <TabButtonContainer>
      {children.map((data, i) => (
        <TabButtonStyle
          key={i}
          className={isSelectedIndex === i ? "selected" : ""}
          onClick={() => onClick(i)}
          disabled={disable}
          style={{
            borderRadius: children.length === 1 ? "40px" : "",
            borderColor: color,
            color: isSelectedIndex === i ? backgroundColor : color,
            backgroundColor: isSelectedIndex === i ? color : backgroundColor,
          }}
        >
          {data}
        </TabButtonStyle>
      ))}
    </TabButtonContainer>
  );
};

export default TabButton;
