<template>
  <button
    class="relative"
    type="button"
    @click="inputRef.click()"
    :class="[
      'flex items-center space-x-1 rounded-full bg-gray-100 py-1 hover:bg-gray-50 focus:ring-2 focus:ring-blue-200',
    ]"
  >
    <input
      :id="forId"
      :value="modelValue"
      class="absolute left-0 bottom-0 h-0 w-0 opacity-0"
      type="color"
      ref="inputRef"
      @change="valueChanged(($event.target as HTMLInputElement).value)"
    />
    <div
      :style="{ backgroundColor: modelValue }"
      class="h-6 w-6 rounded-full ring-1 ring-gray-400"
    ></div>
    <span>{{ modelValue }}</span>
  </button>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = withDefaults(
  defineProps<{
    forId?: string;
    modelValue: string;
  }>(),
  {
    modelValue: '#000000',
  }
);

const inputRef = ref();

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

const valueChanged = (value: string) => {
  emit('update:modelValue', value);
};
</script>
