"use client"
import * as React from 'react';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import useCalendlyModal from '../store/useCalendlyModal';
import CalendlyWidget from './CalendlyWidget';
import CloseIcon from '@mui/icons-material/Close';
import { Button, IconButton } from '@mui/material';

export default function CalendlyModal() {
    const { isOpen, closeModal } = useCalendlyModal()


    return (
        <React.Fragment>
            <Dialog
                open={isOpen}
                onClose={closeModal}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
                fullWidth
                scroll='body'
                maxWidth="sm"
                PaperProps={{
                    sx: {
                        bgcolor: "#fff",
                        p: 1,
                        width: "calc(100% - 15px)",
                        minWidth: '350px',
                        margin: "4px",
                        boxShadow: "none",
                    },
                }}
            >
                <div className='absolute top-2 left-2'>
                    <IconButton onClick={closeModal} aria-label="close">
                        <CloseIcon />
                    </IconButton>
                </div>
                <CalendlyWidget />
            </Dialog>
        </React.Fragment>
    );
}