<template>
  <div class="relative flex items-center gap-2">
    <div class="overflow-hidden rounded-lg shrink-0 size-8">
      <CUploraImage
        v-if="image"
        v-bind="image"
        :sizes="[{ width: 32, height: 32, descriptor: '1x' }]"
        :ui="{ picture: 'aspect-square' }"
      />
      <div v-else-if="image === null" class="w-full h-full bg-elevated" />
    </div>
    <div class="flex-1 truncate max-w-100">
      <ULink
        v-if="to"
        :to="to"
        :target="target"
        class="text-primary font-medium"
      >
        {{ label }}
      </ULink>
      <p v-else class="font-medium text-highlighted text-sm">
        {{ label }}
      </p>
      <p v-if="description" class="text-muted text-xs truncate">
        {{ description }}
      </p>
    </div>
  </div>
</template>

<script setup>
import CUploraImage from "./UploraImage.vue";
defineProps({
  to: { type: null, required: false },
  target: { type: [String, Object, null], required: false },
  label: { type: String, required: true },
  description: { type: [String, null], required: false },
  image: { type: [Object, null], required: false }
});
</script>
