import React from 'react';
import classNames from 'classnames/bind';
import styles from './Tab.scss';

const cx = classNames.bind(styles);

export interface ITab {
  title: string;
  type: string;
}

interface IOwnProps {
  tabList: ITab[];
  selectedTab: string;
  setSelectedTab: (selectedTab: string) => void;
};

const Tab: React.FC<IOwnProps> = ({ tabList, selectedTab, setSelectedTab }) => {
  const handleClick = (index: number) => {
    const tab = tabList[index];

    setSelectedTab(tab.type);
  };

  return (
    <ul className={cx('tab')}>
      {tabList.map((item, index) => (
        <li className={cx('tab_list')} key={item.type}>
          <button
            type="button"
            className={cx('tab_btn')}
            aria-selected={selectedTab === item.type}
            onClick={() => handleClick(index)}
          >{item.title}
          </button>
        </li>
      ))}
    </ul>
  );
};

export default Tab;
