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

export const Seat = ({ seatNo, status, onClick }) => {
  const className = cn(styles.seat, {
    [styles.noSeat]: status === 'none',
    [styles.available]: status === 'available',
    [styles.reserved]: status === 'reserved',
    [styles.selected]: status === 'selected',
    [styles.mine]:status === 'mine',
  });

  return (
    <span
      className={className}
      data-tooltip={seatNo}
      role="button"
      tabIndex={status === 'available' || status === 'selected' ? 0 : -1}
      onClick={onClick}
    >
      {null}
    </span>
  );
};

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