index.js

import "./seat.css";

function Seat({ onChange, status, ...props }) {

  const handleCheckbox = () => {
    if (status == "available" || status == "selected") {
      onChange({
        id: 1,
        status: status == "available" ? "selected" : "available",
      });
    }
  };

  return (
    <input
      type="checkbox"
      onChange={handleCheckbox}
  
      className={` ${
        status == "selected"
          ? "checkbox-selected"
          : status == "reserved"
          ? "checkbox-reserved"
          : "checkbox-available"
      }`}
      {...props}
    />
  );
}

export default Seat;