import React from "react";
import TextField from "@mui/material/TextField";
import AdapterDateFns from "@mui/lab/AdapterDateFns";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DateRangePicker, { DateRange } from "@mui/lab/DateRangePicker";
import Box from "@mui/material/Box";
import { DatePickerProps } from "../types";

export default function DatePicker(props: DatePickerProps) {
    return (
        <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DateRangePicker
                value={props.value}
                minDate={props.minDate}
                maxDate={props.maxDate}
                onChange={(newValue: DateRange<Date>) => {
                    props.setValue(newValue);
                }}
                startText="Kezdeti dátum"
                endText="Végső dátum"
                renderInput={(startProps, endProps) => (
                    <>
                        <TextField {...startProps} />
                        <Box sx={{ mx: 2 }}> - </Box>
                        <TextField {...endProps} />
                    </>
                )}
            />
        </LocalizationProvider>
    );
}