<template>
  <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Simple</h2>
      <MalioInputUpload label="Fichier" />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec label et v-model</h2>
      <MalioInputUpload
        v-model="uploadValue"
        label="Téléverser un document"
      />
      <p class="mt-2 text-sm text-gray-500">Valeur : {{ uploadValue || '(aucun)' }}</p>
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
      <MalioInputUpload
        label="Document PDF"
        accept=".pdf"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
      <MalioInputUpload
        model-value="document.pdf"
        disabled
        label="Fichier"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
      <MalioInputUpload
        label="Fichier"
        hint="Formats acceptés : PDF, DOC, DOCX"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
      <MalioInputUpload
        model-value="image.bmp"
        label="Fichier"
        error="Format non supporté"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Succès</h2>
      <MalioInputUpload
        model-value="rapport.pdf"
        label="Fichier"
        success="Fichier valide"
      />
    </div>

    <div class="rounded-lg border p-4">
      <h2 class="mb-4 text-xl font-bold">Validation dynamique</h2>
      <MalioInputUpload
        v-model="dynamicUpload"
        label="Document PDF"
        accept=".pdf"
        hint="Seuls les fichiers PDF sont acceptés"
        :error="dynamicError"
        :success="dynamicSuccess"
      />
    </div>
  </div>
</template>

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

const uploadValue = ref('')
const dynamicUpload = ref('')

const dynamicError = computed(() => {
  if (!dynamicUpload.value) return ''
  return dynamicUpload.value.endsWith('.pdf') ? '' : 'Seuls les fichiers PDF sont acceptés'
})
const dynamicSuccess = computed(() => {
  if (!dynamicUpload.value) return ''
  return dynamicUpload.value.endsWith('.pdf') ? 'Fichier PDF valide' : ''
})
</script>
