<script lang="ts" setup>
import { ref } from 'vue'
import nijiImg from '@/assets/images/niji.png'
import mjImg from '@/assets/images/mj.png'
interface Option {
  title: string
  image: string
	v: string
}

const emit = defineEmits<{
  (e: 'select', v: string): void
}>()

const options: Option[] = [
  { title: 'Midjourney', image: mjImg, v: 'MJ' },
  { title: 'Niji', image: nijiImg, v: 'NIJI' },
]

const selected = ref<number | null>(0)

const selectOption = (index: number) => {
  selected.value = index
  emit('select', options[index].v)
}
</script>

<template>
  <div class="flex space-x-4">
    <div
      v-for="(option, index) in options"
      :key="index"
      class="relative cursor-pointer transition-all duration-300 ease-in-out rounded-lg border-2 p-4 w-32 h-12"
      :class="[
        selected === index ? 'border-blue-500' : 'border-gray-300',
      ]"
      @click="selectOption(index)"
    >
      <div
        class="absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in-out rounded"
        :style="{ backgroundImage: `url(${option.image})` }"
        :class="[selected === index ? 'opacity-100' : 'opacity-50']"
      />
      <div class="relative z-10 text-white font-bold flex justify-center">
        {{ option.title }}
      </div>
    </div>
  </div>
</template>
