<script setup>
defineProps({
    categories: {
        type: Array,
        required: true,
    }
});
</script>

<template>
    <section class="bg-gray-100 rounded-md p-4">
        <header class="pb-4">
            <h2 class="text-2xl font-roboto font-light">Categories</h2>
        </header>
        <ul class="flex flex-col gap-2">
            <li
                v-for="(category, key) in categories"
                :key="key"
                class="px-3 py-2 bg-white hover:bg-zinc-300"
            >
                {{ category.name }}
            </li>
        </ul>
    </section>
</template>
