import Link from "next/link";
import Image from "next/image";
import WishlistButton from "./WishlistButton";

export type CardData = {
  id: string;
  slug: string;
  name: string;
  price: string;
  image: string | null;
  hoverImage: string | null;
  status: string; // e.g. "Pre-order", "Sold out", "Ready to ship"
  tone: "preorder" | "ready" | "muted";
  saved?: boolean;
};

/** Plain product tile in the reference's style: tall image, second image on hover, name and price underneath. */
export default function ProductCardView({ p, compact = false, priority = false }: { p: CardData; compact?: boolean; priority?: boolean }) {
  return (
    <div className="group relative">
      <Link href={`/products/${p.slug}`} className="block" aria-label={`${p.name}, ${p.price}, ${p.status}`}>
        <div className="swap aspect-portrait bg-linen">
          {p.image && <Image src={p.image} alt={p.name} fill sizes="(min-width:1024px) 25vw, 50vw" className="object-cover" priority={priority} />}
          {p.hoverImage && (
            <div className="swap-b"><Image src={p.hoverImage} alt="" fill sizes="(min-width:1024px) 25vw, 50vw" className="object-cover" /></div>
          )}
        </div>
        <div className={`mt-3 flex items-start justify-between gap-3 ${compact ? "text-[13px]" : "text-[14px]"}`}>
          <span className="leading-snug">{p.name}</span>
          <span className="whitespace-nowrap">{p.price}</span>
        </div>
        <div className={`mt-0.5 text-[12px] ${p.tone === "preorder" ? "text-gilt" : p.tone === "muted" ? "text-stone" : "text-stone"}`}>{p.status}</div>
      </Link>
      {!compact && <WishlistButton productId={p.id} initial={!!p.saved} name={p.name} />}
    </div>
  );
}