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

    <h3 class="ml-4 text-lg line-clamp-2">{{ category.name }}</h3>
  </a>
</template>

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

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