<template>
    <div>
        <p class="mb-2 text-sm font-medium text-neutral-700">Couleur</p>
        <div class="flex flex-wrap gap-3">
            <button
                v-for="color in colors"
                :key="color"
                type="button"
                class="h-10 w-10 rounded-full border-2 transition-transform hover:scale-110"
                :class="modelValue === color ? 'border-neutral-900 scale-110' : 'border-transparent'"
                :style="{ backgroundColor: color }"
                @click="emit('update:modelValue', color)"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    modelValue: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

const colors = [
    '#222783', '#26A69A', '#E91E63', '#4A90D9',
    '#7E57C2', '#8BC34A', '#FDD835', '#80DEEA', '#FF7043',
]
</script>
