import styles from '../Seat-legend/Legend.module.css'
export const Legend = ({
  labels = {
    selectedLabel: "Selected",
    reservedLabel: "Reserved",
    availableLabel: "Available",
  },
}) => {
  const { selectedLabel, reservedLabel, availableLabel } = labels;

  return (
    <div className={styles.legend}>
      <div className={styles.legendItem}>
        <span className={`${styles.seat} ${styles.selected}`}></span> {selectedLabel}
      </div>
      <div className={styles.legendItem}>
        <span className={`${styles.seat} ${styles.reserved}`}></span> {reservedLabel}
      </div>
      <div className={styles.legendItem}>
        <span className={`${styles.seat} ${styles.available}`}></span> {availableLabel}
      </div>
    </div>
  );
};
