<template>
  <div class="field">
    <label class="field-label">{{ label }}</label>
    <div
      v-for="(item, i) in modelValue"
      :key="i"
      class="list-item"
    >
      <slot :item="item" :index="i" :update="(val: any) => updateItem(i, val)" />
      <button class="list-remove" @click="removeItem(i)" aria-label="Supprimer">
        <div class="i-lucide-x h-3.5 w-3.5" />
      </button>
    </div>
    <button class="list-add" @click="addItem">
      <div class="i-lucide-plus h-4 w-4" />
      {{ addLabel }}
    </button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  label: string
  modelValue: any[]
  addLabel?: string
  defaultItem?: () => any
}>()

const emit = defineEmits<{
  'update:modelValue': [value: any[]]
}>()

function updateItem(index: number, value: any) {
  const copy = [...props.modelValue]
  copy[index] = value
  emit('update:modelValue', copy)
}

function removeItem(index: number) {
  const copy = [...props.modelValue]
  copy.splice(index, 1)
  emit('update:modelValue', copy)
}

function addItem() {
  const newItem = props.defaultItem ? props.defaultItem() : {}
  emit('update:modelValue', [...props.modelValue, newItem])
}
</script>

<style scoped>
.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(20 8% 60%);
}

.list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid hsl(20 8% 14%);
  border-radius: 0.5rem;
  background: hsl(20 8% 5%);
}

.list-item > :deep(*:first-child) {
  flex: 1;
}

.list-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: none;
  background: hsl(0 60% 45% / 0.15);
  color: hsl(0 60% 65%);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.125rem;
  transition: all 0.2s;
}

.list-remove:hover {
  background: hsl(0 60% 45% / 0.3);
}

.list-add {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px dashed hsl(20 8% 22%);
  background: none;
  color: hsl(20 8% 50%);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.list-add:hover {
  border-color: hsl(12 76% 48% / 0.4);
  color: hsl(12 76% 68%);
}
</style>
