import React from "react";

import { AdapterLuxon } from "@mui/x-date-pickers/AdapterLuxon";
import {
  DateField as MuiDateField,
  DateFieldProps as MuiDateFieldProps,
} from "@mui/x-date-pickers/DateField";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

import { DateTime } from "luxon";

export interface DateFieldProps extends MuiDateFieldProps<DateTime> {}

export const DateField: React.FC<DateFieldProps> = ({ size = "small", ...props }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterLuxon}>
      <MuiDateField size={size} {...props} />
    </LocalizationProvider>
  );
};

export default DateField;