"use client";

import Link from "next/link";

export type Product = {
  id: string;
  name: string;
  price: string;
  image: string;
};

export default function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="products">
      {products.map((p) => (
        <div key={p.id} className="prod">
          <Link href={`/products/${p.id}`} className="prod__link">
            <img className="prod__img" src={p.image} alt={p.name} />
            <div className="prod__body">
              <div className="prod__name">{p.name}</div>
              <div className="prod__price">{p.price}</div>
            </div>
          </Link>
          <div className="prod__actions">
            <Link href="/cart" className="btn btn--add">Add to cart</Link>
          </div>
        </div>
      ))}
    </div>
  );
}