<script lang="ts" setup>
import { themes } from '../themes'

defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <div class="relative">
    <div class="grid grid-cols-4 gap-8" @click="emit('update:modelValue', '')">
      <div
        v-for="(theme, i) in themes"
        :key="i"
        class="screen shadow-md rounded-lg overflow-hidden relative transition-all cursor-pointer ring-offset-2 select-none"
        :class="modelValue === theme.themeId ? 'ring-4 ring-primary-500' : 'ring-0 hover:ring hover:ring-theme-300'"
        @click.stop="emit('update:modelValue', theme.themeId)"
      >
        <img :src="theme.settings.screenshot" class="pointer-events-none">
        <div class="absolute bg-black/70 text-white z-10 bottom-0 w-full text-sm tracking-tight">
          <div class="p-4">
            <div class="font-bold">
              {{ theme.settings.title }}
            </div>
            <div class="text-xs opacity-40">
              {{ theme.settings.description }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- For validation -->
    <input
      class="pointer-events-none absolute bottom-0 left-1/2 h-0 w-0 -translate-x-1/2 p-0 opacity-0"
      v-bind="$attrs"
      type="text"
      :value="modelValue"
    >
  </div>
</template>
