<template>
  <div class="row">
    <div class="col-md-12 mb-3">
      <div
        class="c-form-element-group c-form-element-group--small c-form-element-group--prepend c-form-element-group--append">
        <button type="button" class="c-form-element-group__prepend u-background-color-red u-color-white">
          <span class="material-symbols-outlined">remove</span>
        </button>
        <input :type="type" :class="getModifiersClass('o-input-field', modifiers)"
          class="o-input-field--small text-center" value="10" min="1" max="100" />
        <button type="button" class="c-form-element-group__append u-background-color-green u-color-white">
          <span class="material-symbols-outlined">add</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ModifierItems } from '../../models/ModifierItems';
import useComponentModifiers from '../../composable/useComponentModifiers';

withDefaults(
  defineProps<{
    type?: string;
    modifiers?: ModifierItems;
  }>(),
  {
    type: 'number',
  }
);
const { getModifiersClass } = useComponentModifiers();
</script>
