<script setup lang="ts">
import { cn } from '~/lib/utils'

const props = defineProps<{
  label: string
  class?: string
  labelClass?: string
}>()
</script>

<template>
  <div :class="cn(`flex flex-col gap-0.5 lg:grid lg:grid-cols-[180px_auto_minmax(0,1fr)] lg:gap-x-3 lg:gap-y-1`, props.class)">
    <!-- Label -->
    <span :class="cn(`text-md font-normal text-muted-foreground`, props.labelClass)">
      {{ label }}
    </span>

    <!-- Colon (hidden on mobile) -->
    <span class="hidden text-md tracking-wide text-muted-foreground lg:block">:</span>

    <!-- Value -->
    <span class="text-md font-sans tracking-wide">
      <slot />
    </span>
  </div>
</template>
