import React from "react";
import type { Product } from "../types";

function Tag({ tag }: { tag: Product["tag"] }) {
  if (!tag || tag === "none") return null;
  const map: Record<string, string> = {
    new: "bg-emerald-500",
    hot: "bg-rose-500",
    sale: "bg-amber-500",
  };
  const cls = map[tag] ?? "bg-gray-500";
  return <span className={`absolute left-2 top-2 text-xs text-white px-2 py-0.5 rounded ${cls}`}>{tag.toUpperCase()}</span>;
}

export function ProductCard({ item, basePath = "" }: { item: Product; basePath?: string }) {
  return (
    <a
      href={item.href ? `${basePath}${item.href}` : "#"}
      className="group relative block rounded-xl overflow-hidden bg-white border border-gray-100 shadow-sm hover:shadow-lg hover:-translate-y-0.5 transition duration-300"
    >
      <Tag tag={item.tag} />
      <div className="aspect-square bg-gray-50 flex items-center justify-center p-6">
        <img src={item.image} alt={item.name} className="max-h-full max-w-full object-contain" />
      </div>
      <div className="px-4 py-3 space-y-1">
        <div className="text-gray-900 font-medium group-hover:text-black min-h-[1.5rem]">{item.name}</div>
        {item.description && <div className="text-gray-500 text-sm line-clamp-2 min-h-[2.5rem]">{item.description}</div>}
        {item.price != null && (
          <div className="text-rose-600 font-semibold">¥{item.price}</div>
        )}
      </div>
    </a>
  );
}