<template>
  <div class="w-full">
    <div class="relative w-full h-[50px] flex overflow-hidden">
      <div
        class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] mr-[-24px]"
        :class="{ 'z-10': modelValue === 0 }" @click="handleSwitch(0)">
        <div
          class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
          <img v-if="leftSelected || leftUnselected" :src="modelValue === 0
            ? leftSelected || leftUnselected
            : leftUnselected || leftSelected
            " class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
          <div class="relative flex items-center justify-center z-20 -translate-x-5">
            <span
              :class="['text-[18px]', modelValue === 0 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">{{
                t("home.chat.discovery") }}</span>
          </div>
        </div>
      </div>

      <div
        class="relative flex-1 flex items-center justify-center h-[50px] transition-all duration-300 ease-[ease] ml-[-24px]"
        :class="{ 'z-10': modelValue === 1 }" @click="handleSwitch(1)">
        <div
          class="absolute inset-0 flex items-center justify-center leading-0 transition-[background] duration-300 overflow-hidden">
          <img v-if="rightSelected || rightUnselected" :src="modelValue === 1
            ? rightSelected || rightUnselected
            : rightUnselected || rightSelected
            " class="absolute inset-x-0 bottom-0 top-auto block w-full h-12 align-bottom z-5" />
          <div class="relative flex items-center justify-center z-20 translate-x-5">
            <span
              :class="['text-[18px]', modelValue === 1 ? 'text-[#2e312f] font-bold' : 'text-white/65 font-medium']">{{
                t("home.chat.aiTour") }}</span>
            <div v-if="showDot" :class="['inline-block ml-1.5 w-1.5 h-1.5 rounded-full z-22 -translate-y-px', modelValue === 1 ? 'bg-[#26d46c]' : 'bg-white/65 border border-black/8',
            ]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import leftSelected from "./images/L_02.png";
import leftUnselected from "./images/L_01.png";
import rightSelected from "./images/R_02.png";
import rightUnselected from "./images/R_01.png";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  modelValue: { type: Number, default: 0 },
  showDot: { type: Boolean, default: true },
});
const emit = defineEmits(["update:modelValue", "change"]);

const handleSwitch = (i) => {
  emit("update:modelValue", i);
  emit("change", i);
};
</script>
