<template>
  <FormField
    :name="name"
    :label="label"
    :placeholder="placeholder"
    :disabled="disabled"
  >
    <template #input="{ forId, value, setValue }">
      <ColorInput
        :for-id="forId"
        :model-value="(value as string)"
        @update:model-value="setValue"
      />
    </template>
    <template #default><slot /></template>
  </FormField>
</template>

<script setup lang="ts">
import FormField from '../FormField.vue';
import ColorInput from '../base/ColorInput.vue';

const props = withDefaults(
  defineProps<{
    forId?: string;
    label: string;
    name: string;
    disabled?: boolean;
    placeholder?: string;
  }>(),
  {
    disabled: false,
  }
);
</script>
