import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import utc from 'dayjs/plugin/utc';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

dayjs.extend(utc);

export default function DateTimePickers() {
  const [value, setValue] = React.useState<Dayjs | null>(
    dayjs.utc(),
  );

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2}>
        <DateTimePicker 
        disablePast 
        minDateTime={dayjs()} 
        ampm={false} 
        value={value} 
        onChange={setValue} 
        slotProps={{
            textField: {
              fullWidth: true,
              variant: "outlined",
              size:"small",
              sx: {
                "& .MuiPickersOutlinedInput-root": {
                  borderRadius: "20px", 
                  px:2,  // round input container
                  "& .MuiOutlinedInput-notchedOutline": {
                    borderRadius: "20px", // round the visible border
                  },
                },
              },        
            },
          }}        
        
        />
      </Stack>
    </LocalizationProvider>
  );
}