() => {
  // import { Calendar } from '@use-date-input/core';
  // import { adapter as dateAdapter } from '@use-date-input/date-fns-adapter';
  function handleCalendarChange(newSelectedDate) {
    console.log('calendar changed selected date', newSelectedDate)
  }
  return (
    <Calendar adapter={dateAdapter} onCalendarChange={handleCalendarChange} />
  )
}

() => {
  // import { useRef, useState } from 'react';
  // import { useDateInput } from "@use-date-input/core";
  // import { adapter as dateAdapter } from "@use-date-input/date-fns-adapter";
  // import { parse } from 'date-fns';
  const defaultParseDate = value => parse(value, 'dd/MM/yyyy', new Date())
  const [date, setDate] = useState('')
  const actions = useRef()
  function handleInputChange(event) {
    const { value } = event.target
    console.log('input changed to', value)
    setDate(event.target.value)
  }
  function handleCalendarChange(newSelectedDate) {
    console.log('calendar changed selected date', newSelectedDate)
    const { dateAPI } = actions.current
    setDate(dateAPI.format(newSelectedDate, 'dd/MM/yyyy'))
  }
  const {
    Calendar,
    CalendarProvider,
    getCalendarProviderProps,
    getInputProps,
  } = useDateInput({
    actions,
    parse: defaultParseDate,
  })
  return (
    <>
      <input
        {...getInputProps({ onChange: handleInputChange })}
        value={date}
      />
      <CalendarProvider
        {...getCalendarProviderProps({
          adapter: dateAdapter,
          onCalendarChange: handleCalendarChange,
        })}
      >
        <Calendar />
      </CalendarProvider>
    </>
  )
}