import dayjs from 'dayjs';

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { useState } from 'react';
import Container from 'react-bootstrap/esm/Container';
import './CheckAvailability.css'
export default function CheckAvailability() {
    const [value, setValue] = useState(dayjs('2022-04-17'));
    return (
        <>
            <Container className='d-flex justify-content-space-between align-items center'>

                <LocalizationProvider dateAdapter={AdapterDayjs}>

                    <DatePicker
                        sx={{
                            width: "20em",
                            height: "0.2em",
                            border: null,
                            
                        }}
          label="Check Date Availability"
          value={value}
          onChange={(newValue) => setValue(newValue)}
        />
                </LocalizationProvider>
                <Container className='ml-2'>
                    <div className='btn-availability'>Check date availability</div>
                </Container>
                

            </Container>
    
        </>
    )

}