<script setup lang="ts">
import type { HTMLAttributes } from 'vue';
import { cn } from '@/lib/utils';
import { Label } from '@/components/core/label';

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

<template>
  <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -->
  <Label
    data-slot="field-label"
    :for="props.for"
    :class="
      cn(
        'group/field-label peer/field-label flex w-fit items-center gap-2 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-4',
        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
        props.class,
      )
    "
  >
    <slot />
  </Label>
</template>
