<template>
  <div :style="containerStyle">
    <button
      v-for="color in COLORS"
      :key="color"
      @click="onColorChange(color)"
      :style="{
        ...colorButtonStyle,
        backgroundColor: color,
        border: selectedColor === color ? '2px solid #333' : '2px solid transparent'
      }"
      :title="color"
    />
  </div>
</template>

<script setup>
const COLORS = [
  '#ffeb3b',
  '#8bc34a',
  '#00bcd4',
  '#2196f3',
  '#9c27b0',
  '#f44336',
  '#ff9800'
]

const props = defineProps({
  selectedColor: {
    type: String,
    required: true
  },
  onColorChange: {
    type: Function,
    required: true
  }
})

const containerStyle = {
  display: 'flex',
  gap: '8px',
  padding: '10px'
}

const colorButtonStyle = {
  width: '28px',
  height: '28px',
  borderRadius: '50%',
  border: 'none',
  cursor: 'pointer',
  transition: 'transform 0.2s, box-shadow 0.2s'
}
</script>