<template>
  <section>
    <h2 class="text-xl font-semibold mb-4">Введите название для вашего QR‑кода</h2>
    <p class="text-gray-600 mb-4">Название поможет вам организовать ваши QR‑коды.</p>

    <form @submit.prevent="emit('nextStep')">
      <label for="name" class="block text-gray-700 font-semibold mb-2">Название</label>
      <InputText id="name" v-model="name" class="w-full" placeholder="Введите название" />
      <p v-if="!name" class="text-red-500 text-sm mt-1">Название обязательно.</p>

      <Button type="submit" :label="buttonLabel" class="p-button-md mt-4 mb-4" :disabled="!name" />
    </form>
  </section>
</template>

<script setup lang="ts">
import { type QRCodeDocument } from '@/types/DBDocumentTypes'
defineProps<{ buttonLabel: string }>()
const name = defineModel<QRCodeDocument['name']>('name')
const emit = defineEmits(['nextStep'])
</script>
