import * as React from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames/bind';

import s from './Tab.module.scss';

const cn = classNames.bind(s);

interface ITabProps {
  id: string;
  label: string;
  selected?: boolean;
  onClick(id: string): any;
}

class Tab extends React.Component {
  render() {
    const { id, label, selected, onClick } = this.props;

    const onSelect = () => {
      onClick(id);
    };

    return (
      <li className={cn(s.tab, { selected })}>
        <button className={s.tab__button} onClick={onSelect}>
          {label}
        </button>
      </li>
    );
  }
}

export default observer(Tab);