<template>
  <div class="p-5">
    <!-- <h3 class="title is-4 mb-5 has-text-centered">
      {{ isVietnamese ? "Chọn loại khách hàng" : "Select Customer Type" }}
    </h3> -->
    <div class="columns is-multiline">
      <div class="column is-6">
        <button
          class="button is-large is-fullwidth"
          style="height: 100px"
          @click="selectType('individual')"
        >
          <div class="has-text-centered">
            <div class="">
              <SvgIcon v-bind="{ name: 'user.svg', type: 'black', size: 40 }"></SvgIcon>
            </div>
            <div class="title is-6 mb-0">
              {{ isVietnamese ? "Cá nhân" : "Individual" }}
            </div>
          </div>
        </button>
      </div>
      <div class="column is-6">
        <button
          class="button is-large is-fullwidth"
          style="height: 100px"
          @click="selectType('company')"
        >
          <div class="has-text-centered">
            <div class="">
              <SvgIcon
                v-bind="{ name: 'building.svg', type: 'black', size: 40 }"
              ></SvgIcon>
            </div>
            <div class="title is-6 mb-0">
              {{ isVietnamese ? "Doanh nghiệp" : "Company" }}
            </div>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useStore } from "@/stores/index";

const store = useStore();
const lang = computed(() => store.lang);
const isVietnamese = computed(() => lang.value === "vi");

const emit = defineEmits(["select", "modalevent"]);

const props = defineProps({
  application: Object,
});

function selectType(type) {
  // Emit event qua modalevent để Modal có thể forward
  emit("modalevent", { name: "select", data: type });
}
</script>

<style scoped>
.button.is-large.is-fullwidth:hover {
  background-color: #3292ec !important;
}
</style>
