<script setup lang="ts">
/**
 * ToolboxVignette — Carte compacte, bullet points, bouton Demarrer.
 */

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

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

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

const defaultActions: ToolboxAction[] = [
  { label: 'Tutos', icon: 'i-lucide-graduation-cap', emit: 'tutos' },
  { label: 'Formules', icon: 'i-lucide-calculator', emit: 'formules' },
  { label: 'Demarrer', icon: 'i-lucide-play', emit: 'demarrer', primary: true },
]

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>
    <ul v-if="bullets && bullets.length > 0" class="vignette__bullets">
      <li v-for="(b, i) in bullets" :key="i">{{ b }}</li>
    </ul>
    <div class="vignette__actions">
      <button
        v-for="action in resolvedActions"
        :key="action.label"
        class="vignette__btn"
        :class="{ 'vignette__btn--primary': action.primary }"
        @click="handleAction(action)"
      >
        <UIcon v-if="action.icon" :name="action.icon" />
        <span>{{ action.label }}</span>
      </button>
    </div>
  </div>
</template>

<style scoped>
.vignette {
  background: var(--mood-accent-soft);
  border-radius: 12px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

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

.vignette__bullets {
  margin: 0;
  padding: 0 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  line-height: 1.5;
  list-style-type: disc;
}
.vignette__bullets li::marker {
  color: var(--mood-accent);
}

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

.vignette__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-accent);
  background: var(--mood-surface);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  min-height: 2.25rem;
}

@media (min-width: 640px) {
  .vignette__btn {
    padding: 0.375rem 0.75rem;
    min-height: auto;
  }
}

.vignette__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--mood-shadow);
}

.vignette__btn:active {
  transform: translateY(0);
}

.vignette__btn--primary {
  color: var(--mood-accent-text);
  background: var(--mood-accent);
}
</style>
