<script setup lang="ts">
/**
 * ToolboxVignette — Carte compacte pour la boite a outils.
 */

export interface ToolboxAction {
  label: string
  icon?: string
  to?: string
  emit?: string
}

const props = withDefaults(
  defineProps<{
    title: string
    description?: string
    contextLabel?: string
    actions?: ToolboxAction[]
  }>(),
  {
    description: undefined,
    contextLabel: undefined,
    actions: undefined,
  },
)

const emit = defineEmits<{
  action: [actionEmit: string]
}>()

const defaultActions: ToolboxAction[] = [
  { label: 'Contexte', icon: 'i-lucide-info', emit: 'context' },
  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
  { label: 'Choisir', icon: 'i-lucide-check-circle', emit: 'choisir' },
  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer' },
]

const resolvedActions = computed(() => props.actions ?? defaultActions)

function handleAction(action: ToolboxAction) {
  if (action.to) {
    navigateTo(action.to)
  }
  else if (action.emit) {
    emit('action', action.emit)
  }
}
</script>

<template>
  <div class="vignette">
    <h4 class="vignette__title">{{ title }}</h4>
    <p v-if="description" class="vignette__desc">{{ description }}</p>
    <div v-if="contextLabel" class="vignette__ctx">
      <UIcon name="i-lucide-tag" class="text-xs" />
      <span>{{ contextLabel }}</span>
    </div>
    <div class="vignette__actions">
      <button
        v-for="action in resolvedActions"
        :key="action.label"
        class="vignette__btn"
        @click="handleAction(action)"
      >
        <UIcon v-if="action.icon" :name="action.icon" class="text-xs" />
        <span>{{ action.label }}</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.vignette {
  background: var(--mood-surface);
  border: 1px solid var(--mood-border);
  border-radius: 4px;
  padding: 0.625rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  transition: border-color 0.15s ease;
}
.vignette:hover {
  border-color: var(--mood-accent);
}

.vignette__title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mood-text);
  margin: 0;
}

.vignette__desc {
  font-size: 0.6875rem;
  color: var(--mood-text-muted);
  line-height: 1.35;
  margin: 0;
}

.vignette__ctx {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.625rem;
  color: var(--mood-text-muted);
}

.vignette__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.125rem;
}

.vignette__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--mood-accent);
  background: var(--mood-accent-soft);
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: opacity 0.12s ease;
  letter-spacing: 0.01em;
}
.vignette__btn:hover {
  opacity: 0.8;
}
</style>
