<template>
    <div class="label-title text-sm md:text-base font-medium text-gray-800">
        {{ title }}
        <span v-if="required" class="text-red-500 ml-1">*</span>
    </div>
    <div v-if="help || $slots.help" class="label-help text-xs text-gray-500 mt-1">
        <slot name="help">
            {{ help }}
        </slot>
    </div>
</template>

<script setup>
const props = defineProps({
    title: {
        type: String,
        required: true
    },
    help: {
        type: String,
        default: ''
    },
    required: {
        type: Boolean,
        default: false
    },
    for: {
        type: String,
        default: ''
    }
})
</script>
