import "./stylesheets/product_listing.css";

export default function ProductCart({ product }) {
  return (
    <div className="my-2 w-4/6 grid grid-cols-3 gap-2 border-2 border-gray-300">
      <div className="col-span-2">
        <img className="listing-image" src={product.picture} />
      </div>
      <div className="grid grid-rows-3">
        <div className="product-listing-text text-2xl">
          {product.name}
        </div>
        <div className="text-lg">
          <span className="product-listing-text text-xl">
            Precio unitario
          </span>
          {product.unitary_price}
        </div>
        <div className="text-lg">
          <span className="product-listing-text text-xl">
            Precio al por mayor
          </span>
          {product.bulk_price}
        </div>
      </div>
    </div>
  );
}