<script setup lang="ts">
const props = defineProps<{
  categoryName: string
  links: string[]
  errors: string[]
  onLinkInput: (index: number, value: string) => void
}>()
</script>

<template>
  <section class="home-nomination-pane">
    <header class="home-vote-picker__category-header">
      <div>
        <h4>{{ props.categoryName }}</h4>
      </div>
    </header>

    <div class="home-nomination-pane__fields">
      <label v-for="(_, index) in props.links" :key="index" class="home-nomination-field">
        <span class="home-nomination-field__header">
          <span>{{ index === 0 ? 'Link 1' : `Link ${index + 1} optional` }}</span>
        </span>
        <input
          :value="props.links[index]"
          type="url"
          maxlength="300"
          placeholder="https://plattform.de/dein-kanal"
          :aria-invalid="Boolean(props.errors[index])"
          @input="props.onLinkInput(index, ($event.target as HTMLInputElement).value)"
        />
        <small v-if="props.errors[index]" class="home-nomination-field__error">{{ props.errors[index] }}</small>
        <small v-else>Offizieller Kanal- oder Stream-Link.</small>
      </label>
    </div>
  </section>
</template>
