<template>
    <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
        <li v-if="showAll" class="mt-2 me-2">
        <button
            type="button"
            class="btn"
            :class="{
                'btn-outline-primary': selectedCategory !== 'all',
                'btn-primary': selectedCategory === 'all'
            }"
            @click="selectCategory('all')"
        >
        All
        </button>
        </li>
        <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
            <button
                type="button"
                class="btn"
                :class="{
                    'btn-outline-primary': category.value !== selectedCategory,
                    'btn-primary': category.value === selectedCategory
                }"
                @click="selectCategory(category.value)"
            >
                {{ category.label }}
            </button>
        </li>
    </ul>

</template>

<script setup>
import { defineProps, ref, watch } from 'vue';

// lists prop 정의
const props = defineProps({
    lists: {
        type: Array,
        required: true,
    },
    showAll: {
        type: Boolean,
        required: false,
    },
    selectedCategory: {
        type: [String, Number],
        default: null,
        required: false,
    },
});

// 카테고리 선택
const selectedCategory = ref(props.selectedCategory);

const emit = defineEmits(['update:data']);
const selectCategory = (cate) => {
    selectedCategory.value = selectedCategory.value === cate ? null : cate;
    emit('update:data', selectedCategory.value);
};

watch(() => props.selectedCategory, (newVal) => {
    selectedCategory.value = newVal;
});

</script>

<style scoped>
@media (max-width: 768px) {
    .cate-list {
        overflow-x: scroll;
        flex-wrap: nowrap !important;

    }
}
</style>
