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

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

// lists prop 정의
const props = defineProps({
    lists: {
        type: Array,
        required: true,
    },
});

// 카테고리 선택
const selectedCategory = ref(null);
const emit = defineEmits();
const selectCategory = (cate) => {
    selectedCategory.value = selectedCategory.value === cate ? null : cate;
    emit('update:data', selectedCategory.value);
};
</script>


<style scoped>
.cate-list {
    margin-left: -0.25rem;
}

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