<template>
    <span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
        <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
        <hint :value="hint" class="ml-2" v-if="hint" small></hint>
        <button
            v-if="button"
            @click.prevent="$emit('buttonclick')"
            class="text-primary hover:outline-none px-2 ml-3 py-1 leading-none hover:bg-primary hover:text-font transition rounded-full text-xs"
            v-text="button"
        ></button>
    </span>
</template>

<script setup>
import Hint from './Hint.vue';

defineEmits(['buttonclick']);

defineProps({
    name: {},
    required: {},
    inline: {
        type: Boolean,
        default: () => false,
    },
    button: {
        required: false,
        default: () => '',
    },
    hint: {
        required: false,
        validator: (value) => value === null || typeof value === 'string',
        default: () => null,
    },
});
</script>
