
import React from "react";


const ProductList = () => {
    const productos = [
        {
          id: 1,
          titulo: "Focaccia Clásica",
          descripcion: "Focaccia con aceite de oliva y romero fresco.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
        },
        {
          id: 2,
          titulo: "Focaccia de Tomate",
          descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
        },
        {
          id: 3,
          titulo: "Focaccia de Aceitunas",
          descripcion: "Focaccia con aceitunas negras y verdes.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
        },
        {
          id: 4,
          titulo: "Pasta Alfredo",
          descripcion: "Fideos con salsa Alfredo cremosa.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
        },
        {
          id: 5,
          titulo: "Pasta Bolognesa",
          descripcion: "Pasta con salsa bolognesa clásica.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
        },
        {
          id: 6,
          titulo: "Pasta Pesto",
          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
        },
        {
          id: 7,
          titulo: "Pasta Primavera",
          descripcion: "Pasta con vegetales frescos y un toque de limón.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
        },
        {
          id: 8,
          titulo: "Ensalada César",
          descripcion: "Lechuga romana, crutones y aderezo César.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
        },
        {
          id: 9,
          titulo: "Ensalada Griega",
          descripcion: "Tomates, pepino, cebolla y queso feta.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
        },
        {
          id: 10,
          titulo: "Ensalada de Quinoa",
          descripcion: "Quinoa con verduras frescas y aderezo ligero.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
        },
        {
          id: 11,
          titulo: "Ensalada Caprese",
          descripcion: "Mozzarella fresca, tomate y albahaca.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
        },
        {
          id: 12,
          titulo: "Sopa de Tomate",
          descripcion: "Sopa de tomate cremosa con albahaca.",
          imagen: "https://via.placeholder.com/350x300?text=Sopa+Tomate",
        },
        {
          id: 13,
          titulo: "Sopa Minestrone",
          descripcion: "Sopa italiana con vegetales y pasta.",
          imagen: "https://via.placeholder.com/350x300?text=Sopa+Minestrone",
        },
        {
          id: 14,
          titulo: "Sopa de Pollo",
          descripcion: "Sopa de pollo casera con fideos.",
          imagen: "https://via.placeholder.com/350x300?text=Sopa+Pollo",
        },
        {
          id: 15,
          titulo: "Sopa de Lentejas",
          descripcion: "Sopa nutritiva con lentejas y verduras.",
          imagen: "https://via.placeholder.com/350x300?text=Sopa+Lentejas",
        },
        {
          id: 16,
          titulo: "Focaccia de Cebolla",
          descripcion: "Focaccia con cebolla caramelizada.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Cebolla",
        },
        {
          id: 17,
          titulo: "Ensalada de Espinacas",
          descripcion: "Espinacas frescas con aderezo balsámico.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Espinacas",
        },
        {
          id: 18,
          titulo: "Pasta Carbonara",
          descripcion: "Pasta con salsa carbonara cremosa.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Carbonara",
        },
        {
          id: 19,
          titulo: "Sopa de Calabaza",
          descripcion: "Sopa cremosa de calabaza con especias.",
          imagen: "https://via.placeholder.com/350x300?text=Sopa+Calabaza",
        },
        {
          id: 20,
          titulo: "Focaccia de Queso",
          descripcion: "Focaccia con mezcla de quesos derretidos.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Queso",
        },
      ];
      
  
    return (
      <div className="grid grid-cols-2 gap-6 ml-6 mb-10 md:grid md:grid-cols-4 md:space-x-3 md:mx-10 ">
        {productos.map((producto) => (
          <div
            key={producto.id}
            className=" shadow-xl w-full rounded-lg overflow-hidden bg-white"
          >
            <img
              src={producto.imagen}
              alt={producto.titulo}
              className="w-full h-48 object-cover rounded-t-lg"
            />
            <div className="p-5">
              <h1 className="text-xl font-bold text-lime-700 mb-2 ml-2">
                {producto.titulo}
              </h1>
              <p className="text-gray-600 text-sm ml-2 mb-3">
                {producto.descripcion}
              </p>
            </div>
          </div>
        ))}
      </div>
    );
  };
  
  export default ProductList;
  