import React, { useState } from 'react'
import { Header } from '../../Layout/Card/Header'
import {Screen} from '../Screen/Screen';
import { Index } from '../Seatposition/Index';
import styles from './Styles.module.css'
import { Button } from '../../Form/Button/Button';
import { Legend } from '../../Layout/Legend/Legend';
export const Layout = () => {
  const[selectedseat,SetSelectedSeat]=useState([]);

  const Confirm=()=>{
    if(selectedseat.length > 0){
    alert('Are You Sure To Book Tickets');
  }
  else{
alert("Choose Minimun One Ticket To Proceed");
  }
}
  return (
    <>
    <Header className={styles.head} title="Choose Your Seats" Color="white"/>
    <div className={styles.center}>
    <div className={styles.screen}>
         <Screen/>   
    </div>
    <div className={styles.seat}>
        <Index  selectedseat={selectedseat} SetSelectedseat={SetSelectedSeat} className='seats'/>
    </div>
    </div>
    <div className={styles.btn}>
        <Button backgroundColor="white"
        label="Confirm"
        primary={true}
        onClick={Confirm}
        
        />
    </div>

    <div className='legend'>
        <Legend/>
    </div>
    </>
  )
}
