/**
 * # 组件 产品卡片 ProductCard（Tailwind + shadcn/ui 实现）
 * 产品网格卡片：图 / 标题 / Read more 链接。首页、列表页、搜索页复用。
 * 整卡为链接，文字继承品牌橙（与原 .card 于 a 上同色一致）。
 */
import { Link } from "@tanstack/react-router";
import { useT } from "~/i18n";

/** # 类型 产品卡片数据（listProducts.items 元素子集） */
export type ProductCardData = {
  id: number;
  slug: string;
  title: string;
  sku: string | null;
  imageUrl: string | null;
  imageAlt?: string | null;
};

/** # 组件 产品卡片 */
export function ProductCard({ p }: { p: ProductCardData }) {
  const t = useT();
  return (
    <Link
      to="/product/$slug/"
      params={{ slug: p.slug }}
      className="block overflow-hidden rounded-lg border border-line bg-white text-brand transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(16,42,76,0.1)]"
    >
      <div className="flex aspect-[4/3] items-center justify-center bg-white p-3">
        {p.imageUrl ? <img src={p.imageUrl} alt={p.imageAlt || p.title} loading="lazy" className="max-h-full object-contain" /> : null}
      </div>
      <div className="px-4 pt-3.5 pb-[18px] text-center">
        <div className="mb-1.5 text-[15px] leading-[1.45] font-semibold">{p.title}</div>
        <span className="mt-2.5 inline-block rounded-[4px] border border-brand bg-white px-4 py-1.5 text-sm font-semibold text-brand hover:bg-soft">
          {t("card_read_more")}
        </span>
      </div>
    </Link>
  );
}