import React, { useState } from 'react';

import { Wrapper, BtnGroup, Btn } from './styled';

type Props = {
  options: SelectOptionType[];
  onChange: (selected: SelectOptionType) => void;
};

const Tabs: React.FC<Props> = ({ options, onChange }: Props) => {
  const [selectedIndex, setSelect] = useState(0);

  const handleClick = (index: number): void => {
    setSelect(index);
    onChange(options[index]);
  };

  return (
    <Wrapper>
      <BtnGroup>
        {options.map((ele, index) => (
          <Btn
            key={ele.key}
            isActive={index === selectedIndex}
            onClick={(): void => {
              handleClick(index);
            }}
          >
            {ele.content}
          </Btn>
        ))}
      </BtnGroup>
      {options[selectedIndex] ? options[selectedIndex].child : null}
    </Wrapper>
  );
};

export default Tabs;