<script setup lang="ts">
defineProps<{
  label: string
}>()
</script>

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

    <!-- Value -->
    <span class="truncate lg:whitespace-normal">
      <span class="me-3 hidden lg:inline-block">:</span>
      <slot />
    </span>
  </div>
</template>
