<template>
  <article
    class="card rounded-lg overflow-hidden border border-border-default hover:border-accent-border transition-colors duration-fast flex flex-col"
    data-testid="equipment-card"
  >
    <!-- Image / Placeholder -->
    <div class="relative w-full h-48 bg-surface overflow-hidden">
      <img
        v-if="equipment.image_url"
        :src="equipment.image_url"
        :alt="equipment.name"
        class="w-full h-full object-cover"
        loading="lazy"
      />
      <div
        v-else
        class="w-full h-full flex items-center justify-center"
      >
        <svg class="w-12 h-12 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 3.75h16.5a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5V5.25a1.5 1.5 0 011.5-1.5z" />
        </svg>
      </div>
      <!-- Category Badge -->
      <span
        v-if="equipment.category"
        class="absolute top-2 left-2 px-2 py-1 text-xs font-medium rounded-sm bg-bg/80 text-text-muted backdrop-blur-sm"
      >
        {{ equipment.category }}
      </span>
      <!-- Availability Badge -->
      <span
        v-if="!equipment.available"
        class="absolute top-2 right-2 px-2 py-1 text-xs font-medium rounded-sm bg-error-bg text-error"
      >
        Nicht verfügbar
      </span>
    </div>

    <!-- Content -->
    <div class="flex flex-col flex-grow p-4">
      <h3 class="text-base font-bold text-text mb-1 line-clamp-1">
        <NuxtLink :to="`/mietkatalog/${equipment.id}`" class="hover:text-accent transition-colors duration-fast">
          {{ equipment.name }}
        </NuxtLink>
      </h3>
      <p class="text-sm text-text-muted mb-3 line-clamp-2 flex-grow">
        {{ equipment.description || "Keine Beschreibung verfügbar" }}
      </p>

      <!-- Price & Button -->
      <div class="flex items-center justify-between mt-2">
        <span v-if="equipment.rental_price != null" class="text-sm font-semibold text-accent">
          {{ formatPrice(equipment.rental_price) }} €/Tag
        </span>
        <span v-else class="text-sm text-text-muted">
          Preis auf Anfrage
        </span>
        <button
          class="btn-primary text-xs px-3 py-2"
          @click="$emit('add-to-cart', { id: equipment.id, name: equipment.name })"
        >
          Mietanfrage
        </button>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import type { EquipmentItem } from "~/composables/useEquipment";

const props = defineProps<{
  equipment: EquipmentItem;
}>();

defineEmits<{
  "add-to-cart": [{ id: number; name: string }];
}>();

function formatPrice(price: number | null): string {
  if (price == null) return "—";
  return new Intl.NumberFormat("de-DE", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(price);
}
</script>
