<template>
  <Icon :name="icon" mode="svg"/>
  {{ name }}
</template>

<script setup lang="ts">
import type { Category } from './types'

type Props = {
  name: Category
}

const { name } = defineProps<Props>()

const icons: Record<Category, string> = {
  'story': 'ph:chat-circle-dots-duotone',
  'snippet': 'ph:code-duotone',
  'tutorial': 'ph:lightbulb-duotone',
  'news': 'ph:newspaper-duotone',
  'freelancing': 'ph:laptop-duotone',
}

const icon = computed(() => name ? icons[name] : 'ph:question-mark-duotone')
</script>