<template>
  <div class="grid gap-4">
    <BaseInput
        v-model="nickname"
        :id="fieldId"
        :disabled="disabled"
        class="px-3 py-2 border rounded"
        @update:modelValue="handleUpdate"
    />

    <div class="flex gap-8">
      <label>
        <BaseCheckbox v-model="disabled" /> Disabled
      </label>
    </div>


    <div class="border p-4 bg-ui-gray-50 rounded">
      {{nickname}}
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import BaseInput from '@/components/input/BaseInput.vue'
  import BaseCheckbox from "@/components/checkbox/BaseCheckbox.vue";


  const fieldId = 'exampleField'
  let nickname = ref('Scrooge Jones')
  const disabled = ref(false)

  const handleUpdate = (blob) => {
    console.log('Example handleUpdate', blob)
  }
</script>
