import { Product } from "@/lib/api";

export default function ProductCard({ product }: { product: Product }) {
  return (
    <article
      style={{
        border: "1px solid #e1e1e1",
        background: "#fff",
        borderRadius: 12,
        padding: 12,
        display: "grid",
        gap: 8
      }}
    >
      <div
        style={{
          height: 160,
          borderRadius: 8,
          background: `url(${product.image_url}) center/cover no-repeat`
        }}
      />
      <h3 style={{ margin: 0, fontSize: 14 }}>{product.title}</h3>
      <div style={{ fontWeight: 600 }}>${(product.price_cents / 100).toFixed(2)}</div>
      <a href={`/listing/${product.id}/${encodeURIComponent(product.title)}`}>View</a>
    </article>
  );
}