<template>
  <div class="space-y-6 p-4">
    <h1 class="text-2xl font-bold">MalioDateTime</h1>

    <div class="flex flex-wrap items-start gap-10">
      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">Simple</h2>
        <MalioDateTime
          v-model="value"
          label="Date et heure du rendez-vous"
          hint="Choisis un jour puis une heure"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ value ?? 'null' }}</code></p>
        </div>
        <button
          type="button"
          class="rounded border px-3 py-1.5"
          @click="value = null"
        >
          Réinitialiser
        </button>
      </div>

      <div class="w-[396px] space-y-3">
        <h2 class="font-semibold">Valeur initiale + bornes</h2>
        <MalioDateTime
          v-model="bounded"
          label="Créneau"
          :min="todayIso"
          :max="maxIso"
          hint="Entre aujourd'hui et +30 jours"
        />
        <div class="rounded border p-3 text-sm">
          <p>Valeur (ISO naïf) : <code>{{ bounded ?? 'null' }}</code></p>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const value = ref<string | null>(null)
const bounded = ref<string | null>('2026-05-20T14:30:00')
</script>
