import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import Modal from 'react-bootstrap/Modal';

export default function SearchModal(props) {
 

  return (
    <>

      <Modal show={props.show} onHide={props.handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Please enter your event details</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Number of Attendees</Form.Label>
              <Form.Control
                type="number"
                placeholder="123.."
                autoFocus
              />
                      </Form.Group>
                      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Event Date</Form.Label>
              <Form.Control
                type="date"
                placeholder="YYYY:"
                autoFocus
              />
                      </Form.Group>
                      <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Start time</Form.Label>
              <Form.Control
                type="time"
                autoFocus
              />
                      </Form.Group>
                             <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>End time</Form.Label>
              <Form.Control
                type="time"
                autoFocus
              />
            </Form.Group>
          
          </Form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={props.handleClose}>
            Submit
          </Button>
       
        </Modal.Footer>
      </Modal>
    </>
  );
}