<script setup>
const props = defineProps({
    label: { type: String, required: true },
    forId: { type: String, default: '' },
    colClass: { type: String, default: 'col-span-12 md:col-span-6 lg:col-span-4' },
    labelClass: { type: String, default: 'w-28 text-right' }
});
</script>

<template>
    <div :class="props.colClass">
        <div class="flex items-center gap-3">
            <label v-if="props.forId" :for="props.forId" class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">
                {{ props.label }}
            </label>
            <span v-else class="text-sm font-medium text-surface-900 dark:text-surface-0" :class="props.labelClass">{{ props.label }}</span>
            <div class="flex-1 min-w-0">
                <slot />
            </div>
        </div>
    </div>
</template>
