<script setup lang="ts">
// R6 / maturation overlay under the path card — a discreet suggestion,
// never blocking, never re-routing.
import type { Verdict } from '~/types/domain'
import { MATURATION_CARD } from '~/lexicon'

defineProps<{ suggestion: NonNullable<Verdict['suggestion']> }>()
const mandateAttached = defineModel<boolean>('mandateAttached', { required: true })
</script>

<template>
  <!-- ld-v2 -->
  <div class="ld-card sug">
    <template v-if="suggestion.kind === 'claim-mandate'">
      <UIcon name="i-lucide-repeat" class="sug__icon" />
      <span>Encore cette décision — réclame un mandat pour ne plus y revenir.</span>
      <label class="sug__check">
        <input v-model="mandateAttached" type="checkbox">
        <span>Joindre la demande de mandat</span>
      </label>
    </template>
    <template v-else-if="suggestion.kind === 'protocolize'">
      <UIcon name="i-lucide-sprout" class="sug__icon" />
      <NuxtLink to="/textes" class="sug__link">{{ MATURATION_CARD }}</NuxtLink>
    </template>
    <template v-else>
      <UIcon name="i-lucide-book-open-check" class="sug__icon" />
      <NuxtLink to="/textes" class="sug__link">
        Cette pratique revient — crée une règle en quelques phrases.
      </NuxtLink>
    </template>
  </div>
</template>

<style scoped>
.sug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.sug__icon { font-size: 1.125rem; color: var(--mood-accent); flex-shrink: 0; }
.sug__check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  color: var(--mood-accent);
}
.sug__check input { accent-color: var(--mood-accent); }
.sug__link { color: var(--mood-text); }
.sug__link:hover { color: var(--mood-accent); }
</style>
