Digital Floorplan Creation

HI,
looking to create a digital floorplan for clients to select seats in a venue. They need to look at the seats that are avaiable and be able to select the seat. the button should then indicate this is thier seat. Previously selected seats shoudl be highlightes.
We will take car of teh higher functionality but need help mapping tehy floorplan to achieve this


IKey Requirements:
• Visualization:
Each seat should be represented as a clickable button displayed on the floorplan.
• Color Coding:
o Green Button: Represents seats that are available. These buttons should be interactive (clickable). (PNG Provided)
o Red Button: Represents seats that are unavailable. These buttons should be inactive (unclickable). (PNG Provided)
• Logic:
o Cross-reference the tables array with the unavailable_seats array to determine each seat's status.
o Dynamically generate buttons for every seat, ensuring proper alignment with its availability.

Function Parameters:
1. Tables Array: An array that provides details of all tables, including their number of seats. Example:
const tables = [ { tableNumber: 1, tableName: "Table A", seats: 14 }, { tableNumber: 2, tableName: "Table B", seats: 14 }, { tableNumber: 3, tableName: "Table C", seats: 14 }, { tableNumber: 4, tableName: "Table D", seats: 14 } ];
2. Unavailable Seats Array: An array specifying which seats are unavailable, grouped by their respective table numbers. Example:
const unavailable_seats = [ { tableNumber: 1, unavailableSeats: [1, 3, 5] }, { tableNumber: 2, unavailableSeats: [2, 4, 6, 8] }, { tableNumber: 3, unavailableSeats: [10, 12] }, { tableNumber: 4, unavailableSeats: [7, 9, 11, 13] } ];