import DatePicker, { DatePickerProps, registerLocale } from "react-datepicker";
import {
	Control,
	Controller,
	FieldValues,
	Path,
	PathValue,
} from "react-hook-form";
import { de } from "date-fns/locale";
registerLocale("de", de);

interface DateInputProps<T extends FieldValues>
	extends Omit<DatePickerProps, "onChange" | "selected"> {
	control: Control<T>;
	name: Path<T>;
}

export const DateInput = <T extends FieldValues>({
	control,
	name,
	...props
}: DateInputProps<T>) => {
	return (
		<Controller
			control={control}
			name={name}
			render={({ field }) => (
				<DatePicker
					locale={"de"}
					onChange={(date) => field.onChange(date)}
					selected={field.value}
					{...(props as any)}
				/>
			)}
		/>
	);
};