import BookingWrapper from '../../Layout/BookingWrapper/Index';
import Header from '../../Layout/Header/Index'
import Modal from '../../Shared/Modal/Index'
import Button from '../../Base/Button/Index';
import LegendWrapper from '../LegendWrapper/Index'
import styles from './styles.module.css';
const SeatBooking = () => {

  const data = [
    {
      "row_id": 1,
      "columnData": [
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 1,
          "status": "reserved"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "reserved"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 6,
          "status": "reserved"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "reserved"
        },
        {
          "id": 0,
          "status": "aisle"
        }
      ]
    },
    {
      "row_id": 2,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 3,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 4,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 5,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 6,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 7,
      "columnData": [
        {
          "id": 1,
          "status": "available"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "available"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 6,
          "status": "available"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "available"
        },
        {
          "id": 9,
          "status": "available"
        },
        {
          "id": 10,
          "status": "available"
        }
      ]
    },
    {
      "row_id": 8,
      "columnData": [
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 1,
          "status": "reserved"
        },
        {
          "id": 2,
          "status": "available"
        },
        {
          "id": 3,
          "status": "reserved"
        },
        {
          "id": 4,
          "status": "available"
        },
        {
          "id": 0,
          "status": "aisle"
        },
        {
          "id": 5,
          "status": "available"
        },
        {
          "id": 6,
          "status": "reserved"
        },
        {
          "id": 7,
          "status": "available"
        },
        {
          "id": 8,
          "status": "reserved"
        },
        {
          "id": 9,
          "status": "available"
        }
      ]
    }
  ]
  return (
    <div className={styles['seat-booking-wrapper']}>
      <Header>Choose  Seats</Header>
      <BookingWrapper seatData={data} />
      <div className={styles['btn-wrapper']}>
        <Button size={"md"}>Confirm</Button>
      </div>
        <LegendWrapper /> 
    </div>
  )
}

export default SeatBooking;