<script lang='ts' setup>
import { countries } from "@/auth";

const model = defineModel({ type: String, required: true });
const { t } = useI18n();

function handleChangeCountry(code: string) {
  model.value = code;
}
</script>

<template>
  <ion-list lines="full">
    <ion-list-header>
      <ion-label>{{ t('auth.login.selectCountryCode') }}</ion-label>
    </ion-list-header>

    <ion-radio-group :value="model" @ion-change="handleChangeCountry($event.detail.value)">
      <ion-item v-for="country in countries" :key="country.code">
        <ion-radio :value="country.code" class="py-2">
          <div class="flex justify-between w-full items-center">
            <div class="flex-center space-x-2">
              <div class="icon">
                <component :is="country.icon" class="text-lg" />
              </div>
              <div class="text-sm font-semibold">
                {{ country.code }}
              </div>
            </div>
            <div class="end">
              {{ country.dialCode }}
            </div>
          </div>
        </ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>
</template>

<style lang='css' scoped>
@reference "tailwindcss";

ion-item {
  --padding-start: 0;
  --padding-end: 0;
  --padding-top: 6px;
  --padding-bottom: 6px;
  border-radius: 0.25rem;
}
</style>
