<template>
  <a
      href="#"
      :key="category.id"
      class="flex items-center gap-3"
      @click.prevent="$emit('onSelect', category)"
  >
    <div class="avatar shrink-0">
      <div class="w-10 h-10 rounded">
        <img :src="category.image" :alt="category.name" loading="lazy" width="40" height="40" class="bg-base-400"/>
      </div>
    </div>

    <h3 class="text-base font-medium leading-snug line-clamp-2">{{ category.name }}</h3>
  </a>
</template>

<script setup>
const props = defineProps({
  category: {
    type: Object,
    required: true,
  }
});

const emit = defineEmits(["onSelect"]);
</script>
