<template>
    <div>
        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
            <li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
                <button
                    type="button"
                    class="btn"
                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
                    @click="selectAlphabet(char)"
                >
                    {{ char }}
                </button>
            </li>
        </ul>
        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
            <li v-for="char in englishChars" :key="char" class="mt-2 me-2">
                <button
                    type="button"
                    class="btn"
                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
                    @click="selectAlphabet(char)"
                >
                    {{ char }}
                </button>
            </li>
        </ul>
    </div>
</template>

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

const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

const selectedAlphabet = ref(null);
//emit정의
const emit = defineEmits();
const selectAlphabet = (alphabet) => {
    selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
    emit('update:data',selectedAlphabet.value);
};
</script>

<style scoped>
.btn {
    min-width: 56px;
}

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