import PropTypes from 'prop-types';
import cn from 'classnames';
import styles from './Seat.module.css';

export const Seat = ({ seatNo, status, onClick }) => {
  const isMine = status === 'mine' || status === 'mine-unselected';

  const className = cn(styles.seat, {
    [styles.noSeat]: status === 'none',
    [styles.available]: status === 'available',
    [styles.reserved]: status === 'reserved',
    [styles.selected]: status === 'selected',
    [styles.mine]: isMine,
    [styles.unselected]: status === 'mine-unselected',
  });

  return (
    <span
      className={className}
      data-tooltip={seatNo}
      role="button"
      tabIndex={['available', 'selected', 'mine', 'mine-unselected'].includes(status) ? 0 : -1}
      onClick={onClick}
    >
      {null}
    </span>
  );
};

Seat.propTypes = {
  seatNo: PropTypes.string.isRequired,
  status: PropTypes.oneOf([
    'none',
    'available',
    'reserved',
    'selected',
    'mine',
    'mine-unselected'
  ]),
  onClick: PropTypes.func,
};
