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

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

      <Button
        type="submit"
        :label="buttonLabel"
        class="p-button-md mt-4 mb-4 dark:border-orange-500 dark:hover:border-orange-600 dark:text-gray-300"
        :loading="isPending"
        :disabled="!name || isPending"
      />
    </form>
  </section>
</template>

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