import { Form } from "react-router-dom";
import "./stylesheets/product_listing.css";

export default function ProductCart({ product }) {
  return (
    <div className="my-2 grid grid-cols-2 gap-2 border-2 border-gray-300">
      <div>
        <img className="listing-image" src={product.picture} />
      </div>
      <div className="grid grid-rows-6">
        <div className="product-listing-text text-2xl">
          {product.name}
        </div>
        <div className="product-listing-text text-xl">
          Precio unitario
        </div>
        <div className="text-lg">
          {product.unitary_price}
        </div>
        <div className="product-listing-text text-xl">
          Precio al por mayor
        </div>
        <div className="text-lg">
          {product.bulk_price}
        </div>
        <div className="flex flex-row">
          <div className="product-listing-text text-lg">
            Cantidad en carrito:
          </div> 
          <div className="mx-2 text-lg">
            {product.quantity}
          </div>
          <div className="mx-2">
            <Form method="post" id="delete-product-cart-form">
              <input type="hidden" id="product-id" name="product_id" value={product.id} />
              <button type="submit" className="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">
                Borrar
              </button>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}