<script setup lang="ts">
import type { Component, HTMLAttributes } from 'vue';
import { cn } from '../utils/cn';
import { Label } from '../label/index';

const props = defineProps<{
    class?: HTMLAttributes['class'];
    icon?: Component;
}>();
</script>

<template>
    <Label
        data-slot="field-label"
        :class="
            cn(
                'group/field-label peer/field-label flex w-fit gap-1.5 leading-snug group-data-[disabled=true]/field:opacity-50',
                'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&_>[data-slot=field]]:p-3',
                'has-[[data-state=checked]]:bg-primary/5 has-[[data-state=checked]]:border-primary dark:has-[[data-state=checked]]:bg-primary/10',
                icon ? 'items-center' : '',
                props.class
            )
        ">
        <component :is="icon" v-if="icon" class="h-4 w-4 text-text-quaternary shrink-0" />
        <slot />
    </Label>
</template>
