Seat Reservation - Copy this React, Tailwind Component to your project

The seat reservation system is visually designed with a movie theater layout, showing a grid of seats organized into rows and columns. Each seat is represented by a small chair icon with different visual states to indicate availability and selection status. The background of the interface is a rich dark red or maroon tone, evoking a cinematic feel. 1. Seat Layout: Rows and Columns: The seating area consists of multiple rows (labeled A to F) and columns (labeled 1 to 24), providing a clear grid like arrangement. This grid represents different seat positions in the cinema hall. Seat Blocks: Seats are grouped into blocks with aisles dividing sections, making navigation visually clear. 2. Seat States: Available Seats: Represented by a dark grey chair icon in a square button with a white outline, indicating that the seat is free to select. Selected Seat: When a seat is selected, the icon changes its background color to a highlighted state (e.g., a brighter color such as green) to show that the user has chosen this seat. Unavailable Seats: Seats that are already booked appear with a darker, slightly greyed out icon, sometimes marked with a "booked" or unavailable visual state. Hover Effect: When hovering over available seats, a slight color change or animation may appear, signaling that the seat can be clicked. 3. Screen Position: At the bottom of the seating chart, there is a screen indicator labeled "Pantalla" (meaning "Screen" in Spanish), which shows where the movie screen is relative to the seats. This provides a point of reference for users to understand how close or far their chosen seat is from the screen. 4. Interaction Buttons: Below the seat map, two buttons allow users to interact with the system: Mostrar Selección (Show Selection): Clicking this button shows which seats the user has chosen. Reservar (Reserve): This button finalizes the seat reservation, confirming the selected seats for booking. 5. Design Details: The color palette consists of dark red for the background, grey tones for available seats, and white/bright colors for selected or highlighted elements. The grid layout is well spaced, ensuring that the user can easily distinguish between seats and select them without confusion. There are visual indicators for each row and column, such as row labels (A, B, C, etc.) on the sides and column numbers (1 24) at the top and bottom, helping users quickly identify their preferred seats.