<script setup>
import { motion } from 'motion-v'
import { ArrowRight } from 'lucide-vue-next'

const props = defineProps({
  car: {
    type: Object,
    required: true,
  },
  delay: {
    type: Number,
    default: 0,
  },
})

const emit = defineEmits(['select'])

function handleSelect() {
  emit('select', props.car)
}
</script>

<template>
  <motion.div
    :initial="{ opacity: 0, y: 20 }"
    :while-in-view="{ opacity: 1, y: 0 }"
    :viewport="{ once: true, margin: '-50px' }"
    :transition="{ duration: 0.6, delay, ease: 'easeOut' }"
    class="group relative aspect-[3/4] overflow-hidden rounded-sm cursor-pointer bg-[#0a0a0a]"
    @click="handleSelect"
  >
    <motion.img
      :while-hover="{ scale: 1.05 }"
      :transition="{ duration: 1.2, ease: 'easeOut' }"
      :src="car.image"
      :alt="car.name"
      class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-700"
    />

    <div class="absolute inset-0 bg-gradient-to-t from-black/95 via-black/40 to-transparent opacity-90 group-hover:opacity-100 transition-opacity duration-500" />

    <div class="absolute inset-0 p-6 sm:p-8 flex flex-col justify-end">
      <div class="transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500 ease-[0.16,1,0.3,1]">
        <div class="text-[9px] tracking-[0.2em] uppercase text-white/60 mb-3">{{ car.category }}</div>
        <h3 class="text-2xl sm:text-3xl font-luxury uppercase tracking-wider font-light mb-6 leading-tight">{{ car.name }}</h3>

        <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-100">
          <ul class="space-y-3 mb-8">
            <li v-for="spec in car.specs" :key="spec" class="flex items-center gap-4 text-xs text-white/70 font-light tracking-wide">
              <div class="w-1 h-1 rounded-full bg-white/40" />
              {{ spec }}
            </li>
          </ul>

          <div class="flex items-center justify-between border-t border-white/20 pt-5">
            <div class="text-white/80 text-xs font-light tracking-wide">{{ car.price }}</div>
            <div class="text-[10px] uppercase tracking-[0.2em] font-medium text-white flex items-center gap-2">
              {{ car.actionLabel }}
              <ArrowRight class="w-3 h-3" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </motion.div>
</template>
