<template>
  <div class="card group overflow-hidden">
    <div class="relative aspect-[4/3] overflow-hidden bg-slate-100">
      <img :src="getProductImageUrl(product.image)" :alt="product.title" class="h-full w-full object-cover transition duration-500 group-hover:scale-105" />
      <span class="absolute left-3 top-3 rounded-full bg-white/90 px-3 py-1 text-xs font-bold text-slate-700">
        {{ product.category }}
      </span>
      <button
        class="absolute right-3 top-3 rounded-full bg-white/90 p-2 text-slate-700 transition hover:bg-brand-600 hover:text-white"
        @click.prevent="$emit('toggle-save', product.id)"
      >
        <Heart :fill="saved ? 'currentColor' : 'none'" size="18" />
      </button>
    </div>

    <div class="p-4">
      <div class="mb-2 flex items-center justify-between gap-3">
        <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold text-emerald-700">
          {{ product.condition }}
        </span>
        <span class="text-xs font-semibold text-slate-500">{{ product.location }}</span>
      </div>

      <h3 class="line-clamp-2 min-h-[48px] text-base font-bold text-slate-900">
        {{ product.title }}
      </h3>

      <p class="mt-2 text-lg font-extrabold text-brand-700">
        {{ formatRupiah(product.price) }}
      </p>

      <div class="mt-4 flex gap-2">
        <RouterLink :to="`/produk/${product.id}`" class="btn-secondary flex-1 !px-3 !py-2 text-center">
          Detail
        </RouterLink>
        <a :href="waLink" target="_blank" class="btn-primary flex-1 !px-3 !py-2 text-center">
          Massage
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { Heart } from "lucide-vue-next"
import { formatRupiah, getProductImageUrl } from "../utils"

const props = defineProps({
  product: {
    type: Object,
    required: true
  },
  saved: {
    type: Boolean,
    default: false
  }
})

defineEmits(["toggle-save"])

const waLink = computed(() => {
  const text = encodeURIComponent(`Halo, saya tertarik dengan ${props.product.title} di SecondTech Market.`)
  return `https://wa.me/${props.product.whatsapp}?text=${text}`
})
</script>
