<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { createDatePicker, type DatePickerInstance } from "@schedulespark/date-picker";
import "@schedulespark/date-picker/styles.css";

const host = ref<HTMLDivElement | null>(null);
let picker: DatePickerInstance | undefined;

onMounted(() => {
  if (!host.value) {
    return;
  }

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

  picker.mount(host.value);
});

onBeforeUnmount(() => {
  picker?.destroy();
});
</script>

<template>
  <div ref="host" />
</template>