import { useEffect, useRef } from "react";
import { createDatePicker } from "@schedulespark/date-picker";
import "@schedulespark/date-picker/styles.css";

export function DatePickerField(): JSX.Element {
  const hostRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!hostRef.current) {
      return;
    }

    const picker = createDatePicker({
      label: "Start date",
      value: "2026-07-04",
      onChange: console.log
    });

    picker.mount(hostRef.current);
    return () => picker.destroy();
  }, []);

  return <div ref={hostRef} />;
}