<script lang="ts" setup>

// types

import ColorCircle from "~/components/ui/ColorCircle.vue";

type Props = {
    colors: string[];
    selectedColor: string;
}

// props

defineProps<Props>();

// emit

defineEmits(["update:selectedColor"]);

</script>

<template>
    <div>
        <span>
            Color : {{ selectedColor}}
        </span>
        <div>
            <ColorCircle
                v-for="color in colors"
                :key="color"
                :color="color"
                :selected="selectedColor === color"
            />
        </div>
    </div>
</template>