import type { Product } from "@/lib/types";

export default function ProductCard({ product }: { product: Product }) {
  return (
    <div className="rounded-xl2 overflow-hidden bg-white border border-neutral-200">
      <div
        className="aspect-[3/2] bg-neutral-200 bg-cover bg-center"
        style={{ backgroundImage: `url(${product.image})` }}
      />
      <div className="p-6">
        <h3 className="font-display text-base text-neutral-900">{product.name}</h3>
        <p className="mt-2 text-sm text-neutral-600 line-clamp-2">{product.description}</p>
        <div className="mt-4 flex items-center justify-between">
          <span className="text-sm font-semibold text-neutral-900">${product.price.toFixed(2)}</span>
          <a
            href={product.externalUrl}
            target="_blank"
            rel="noreferrer"
            className="rounded-full bg-accent-500 text-white text-xs font-semibold uppercase tracking-wide px-4 py-2 hover:bg-accent-600"
          >
            View Product
          </a>
        </div>
      </div>
    </div>
  );
}