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

export const Seat = ({ seatNo, status, onChange, ...props }) => {
  const handleChange = () => {
    if (status === "available" || status === "selected") {
      onChange?.({
        seatNo,
        status,
      });
    }
  };

  const className = cn(styles.seat, {
    [styles.available]: status === "available",
    [styles.reserved]: status === "reserved",
    [styles.selected]: status === "selected",
    [styles.myseat]: status === "myseat",
  });

  return (
    <span
      className={className}
      data-tooltip={seatNo}
      onClick={(e) => handleChange(e)}
      {...props}
    />
  );
};

Seat.propTypes = {
  seatNo: PropTypes.string.isRequired,
  status: PropTypes.oneOf(["available", "reserved", "selected", "myseat"]),
  onChange: PropTypes.func,
};
