import React, { useState } from 'react';

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

type OptionProps = {
  key: string;
  content: React.ReactNode;
  child: React.ReactNode;
};

type Props = {
  options: OptionProps[];
};

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

  const handleClick = (index: number) => {
    setSelect(index);
  };

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

export default Tabs;