Untitled

import PropTypes from 'prop-types';
import { createStyles } from '@mui/material/styles';
import { TextField, Stack, Typography } from '@mui/material';
// import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// import { DatePicker } from '@mui/x-date-pickers/DatePicker'; // Perbaikan impor DatePicker
// import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
const styles = createStyles({
  box: {
    borderRadius: '12px',
    border: '2px dashed rgba(0, 0, 0, 0.3)',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    padding: '10px',
    '@media screen and (max-width:1024px)': {
      height: '216px'
    }
  },
  text: {
    fontSize: '14px',
    fontWeight: '400',
    color: 'black',
    textAlign: 'center',
    marginBottom: '8px'
  },
  label: {
    fontSize: '14px',
    color: '#434343',
    fontWeight: '700',
    '@media screen and (max-width:1536px)': {
      fontSize: '12px'
    }
  }
});

const DatePickerForm = ({
  size = 'small',
  name,
  placeholder = 'Select Date',
  value,
  onChange,
  onBlur,
  error,
  helperText,
  label,
  required
}) => {
  return (
    <Stack direction="column" alignItems="start" spacing="4px" width="100%">
      <Typography sx={styles.label}>
        {label} {required && <span style={{ color: 'red', marginLeft: '2px' }}>*</span>}
      </Typography>
      <TextField
        size={size}
        type="date"
        name={name}
        sx={{ width: '100%', fontSize: 11, '& input': { backgroundColor: '#ffffff' } }}
        placeholder={placeholder}
        value={value}
        onChange={onChange}
        onBlur={onBlur}
        error={error}
        helperText={helperText}
      />
    </Stack>
    // <LocalizationProvider dateAdapter={AdapterDayjs}>
    //                 <DatePicker
    //                   format="DD/MM/YYYY"
    //                   sx={{ width: '100%', backgroundColor: '#fff' }}
    //                   slotProps={{
    //                     textField: { size: 'small', sx: { width: '100%', backgroundColor: '#fff' } }
    //                   }}
    //                   slots={{
    //                     openPickerIcon: CalendarMonthIcon
    //                   }}
    //                 ></DatePicker>
    //               </LocalizationProvider>
  );
};
DatePickerForm.propTypes = {
  value: PropTypes.any.isRequired,
  size: PropTypes.string,
  onChange: PropTypes.any.isRequired
};

export default DatePickerForm;