import { Link } from "@tanstack/react-router";
import { MapPin } from "lucide-react";
import { type Product, formatRWF } from "@/data/products";

export function ProductCard({ p }: { p: Product }) {
  const badgeText =
    p.status === "in_season"
      ? "In season"
      : p.status === "available_in_stock"
      ? "In stock"
      : "Unavailable";

  return (
    <Link
      to="/product/$productId"
      params={{ productId: p.id }}
      className="group block"
    >
      <div className="relative aspect-square overflow-hidden rounded-2xl bg-muted">
        <img
          src={p.image}
          alt={p.name}
          loading="lazy"
          width={1024}
          height={1024}
          className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
        />
        <span
          className={`absolute top-3 left-3 rounded-full px-3 py-1 text-xs font-medium backdrop-blur-md ${
            p.status === "unavailable"
              ? "bg-foreground/80 text-background"
              : "bg-background/85 text-foreground"
          }`}
        >
          {badgeText}
        </span>
      </div>
      <div className="mt-4 grid gap-3">
        <div>
          <h3 className="font-display text-lg leading-tight">{p.name}</h3>
          <p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
            <MapPin className="h-3 w-3" /> {p.location}
          </p>
        </div>
        <div className="flex items-center justify-between gap-3">
          <div className="text-right">
            <p className="font-display text-lg text-tomato">
              {formatRWF(p.pricePerKg)}
            </p>
            <p className="text-xs text-muted-foreground">per {p.unit}</p>
          </div>
          <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-slate-600">
            View details
          </span>
        </div>
      </div>
    </Link>
  );
}