import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// ----------------------------------------------------------------------

type DateFilterProps = {
    label: string;
}

export function DateFilter({ label }: DateFilterProps) {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
                slotProps={{
                    openPickerIcon: (ownerState: any) => ({
                        color: ownerState.isPickerOpen ? 'secondary' : 'primary',
                    }),
                }}
                label={label}
            />
        </LocalizationProvider>
    );
}

export function TimeFilter({ label }: DateFilterProps) {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <TimePicker
                slotProps={{
                    openPickerIcon: (ownerState: any) => ({
                        color: ownerState.isPickerOpen ? 'secondary' : 'primary',
                    }),
                }}
                label={label}
            />
        </LocalizationProvider>
    );
}

export function DateTimeFilter({ label }: DateFilterProps) {
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DateTimePicker
                slotProps={{
                    openPickerIcon: (ownerState: any) => ({
                        color: ownerState.isPickerOpen ? 'secondary' : 'primary',
                    }),
                }}
                label={label}
            />
        </LocalizationProvider>
    );
}