---
import type { Product } from "../data/products";
import type { Locale } from "../i18n/config";
import { localePrefix } from "../i18n/config";
import { useTranslations } from "../i18n/ui";
import { formatPrice } from "../i18n/format";
import { effektiverPreis, rabattLabel, hatAktivenRabatt } from "../data/rabatt";

interface Props { product: Product; lang: Locale }
const { product, lang } = Astro.props;
const t = useTranslations(lang);
const finalPrice = effektiverPreis(product);
const discountBadge = rabattLabel(product);
const showOldAsPreis = !product.preisAlt && hatAktivenRabatt(product);

const badgeLabel: Record<string, string> = {
  neu: t.badge.neu,
  bestseller: t.badge.bestseller,
  sale: t.badge.sale,
  handgemacht: t.badge.handgemacht,
};
const name = product.name[lang];
const desc = product.beschreibung[lang];
---
<a href={`${localePrefix(lang)}/produkt/${product.slug}/`} class="card product-card">
  <div class="product-media">
    {product.bilder && product.bilder.length > 0 ? (
      <img class="product-photo" src={product.bilder[0]} alt={name} loading="lazy" />
    ) : (
      <div class="img-placeholder" role="img" aria-label={`${t.common.photoSoon}: ${name}`}>
        {t.common.photoSoon}<br /><span class="small">{name}</span>
      </div>
    )}
    <div class="product-badges">
      {product.badges.map((b) => (
        <span class={`badge ${b === "sale" ? "badge-sale" : ""}`}>{badgeLabel[b]}</span>
      ))}
      {product.bestand === 0 && <span class="badge badge-sold-out">{t.badge.ausverkauft}</span>}
      {discountBadge && <span class="badge badge-rabatt">{discountBadge}</span>}
    </div>
  </div>
  <h3>{name}</h3>
  <p class="small">{desc.slice(0, 78)}{desc.length > 78 ? "…" : ""}</p>
  <div class="price-row">
    {product.preisAlt && <span class="price-old">{formatPrice(product.preisAlt, lang)}</span>}
    {showOldAsPreis && <span class="price-old">{formatPrice(product.preis, lang)}</span>}
    <span class="price">{formatPrice(finalPrice, lang)}</span>
  </div>
</a>

<style>
  .product-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
  .product-media { position: relative; }
  .product-media .img-placeholder { aspect-ratio: 1 / 1; min-height: 0; }
  .product-badges { position: absolute; top: 0.6rem; left: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
  .product-card h3 { font-size: 1.05rem; margin: 0.2rem 0 0; transition: color 0.2s var(--ease); }
  .product-card:hover h3 { color: var(--c-accent); }
  .product-card p { margin: 0; }
  .price-row { margin-top: auto; display: flex; align-items: baseline; gap: 0.6rem; }
  .price { color: var(--c-accent); font-weight: 700; font-size: 1.15rem; }
  .price-old { color: var(--c-text-muted); text-decoration: line-through; font-size: 0.9rem; }
  .badge-rabatt { background: #ff5f7e; color: #fff; border-color: #ff5f7e; }
</style>
