<template>
  <select v-model="selectedRank" @change="handleChange"
    class="px-4 py-2 m-4 font-bold h-12 border-none text-center bg-esyellow transition-colors border border-esyellow-dark rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-estyellow-dark focus:border-estyellow-dark cursor-pointer appearance-none">
    <option value="">rank</option>
    <option v-for="rank in ranks" :key="rank.value" :value="rank.value">
      {{ rank.label }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits(['change'])

const ranks = [
  { value: 'A', label: 'Ace' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
  { value: '5', label: '5' },
  { value: '6', label: '6' },
  { value: '7', label: '7' },
  { value: '8', label: '8' },
  { value: '9', label: '9' },
  { value: '10', label: '10' },
  { value: 'J', label: 'Jack' },
  { value: 'Q', label: 'Queen' },
  { value: 'K', label: 'King' }
]

const selectedRank = ref('')

const handleChange = () => {
  emit('change', selectedRank.value)
}
</script>