<script setup lang="ts">
import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";

defineProps<{ modelValue: NoteColor }>();
defineEmits<{ (e: "update:modelValue", value: NoteColor): void }>();
</script>

<template>
  <div class="flex flex-wrap items-center gap-1.5">
    <button
      v-for="key in NOTE_COLOR_KEYS"
      :key="key"
      type="button"
      :title="NOTE_COLOR_LABELS[key]"
      :aria-label="NOTE_COLOR_LABELS[key]"
      :aria-pressed="modelValue === key"
      class="h-6 w-6 rounded-full border border-black/10 transition hover:scale-110
             focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1
             focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900"
      :class="[NOTE_SWATCH_CLASSES[key], modelValue === key ? 'ring-2 ring-brand ring-offset-1' : '']"
      @click="$emit('update:modelValue', key)"
    />
  </div>
</template>
