<template>
  <div class="max-w-md space-y-6">
    <h1 class="text-2xl font-bold">MalioDateRange</h1>

    <MalioDateRange
      v-model="value"
      label="Période"
      hint="Clique deux fois pour définir une plage"
    />

    <div class="rounded border p-3 text-sm">
      <p>Début : <code>{{ value?.start ?? 'null' }}</code></p>
      <p>Fin : <code>{{ value?.end ?? 'null' }}</code></p>
    </div>

    <div class="flex gap-2">
      <button
        type="button"
        class="rounded bg-m-primary px-3 py-1.5 text-white"
        @click="value = {start: '2026-12-20', end: '2026-12-31'}"
      >
        Forcer 20→31/12/2026
      </button>
      <button
        type="button"
        class="rounded border px-3 py-1.5"
        @click="value = null"
      >
        Réinitialiser
      </button>
    </div>

    <MalioDateRange
      v-model="bounded"
      label="Plage bornée"
      :min="todayIso"
      :max="maxIso"
      hint="Entre aujourd'hui et +30 jours"
    />
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'

type RangeValue = {start: string; end: string}

const pad = (n: number) => String(n).padStart(2, '0')
const toIso = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
const now = new Date()
const todayIso = toIso(now)
const maxIso = toIso(new Date(now.getTime() + 30 * 86400000))

const value = ref<RangeValue | null>(null)
const bounded = ref<RangeValue | null>(null)
</script>
