import React from "react";
import { Productos } from "../models/Productos.models";

interface ProductListProps {
  productos: Productos;
}


const ProductList = () => {
    const productos = [
        {
          id: 1,
          titulo: "Focaccia chicken parm",
          descripcion: "Focaccia con aceite de oliva y romero fresco.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Clasica",
        },
        {
          id: 2,
          titulo: "Focaccia meatballs",
          descripcion: "Focaccia cubierta con tomates cherry y hierbas.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Tomate",
        },
        {
          id: 3,
          titulo: "Focaccia caprese",
          descripcion: "Focaccia con aceitunas negras y verdes.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
        },
        {
          id: 4,
          titulo: "Focaccia pavo romesco",
          descripcion: "Focaccia con aceitunas negras y verdes.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
        },
        {
          id: 5,
          titulo: "Focaccia griega",
          descripcion: "Focaccia con aceitunas negras y verdes.",
          imagen: "https://via.placeholder.com/350x300?text=Focaccia+Aceitunas",
        },
        {
          id: 6,
          titulo: "Spaghetti carbonara",
          descripcion: "Fideos con salsa Alfredo cremosa.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Alfredo",
        },
        {
          id: 7,
          titulo: "Spaghetti bolognesa",
          descripcion: "Pasta con salsa bolognesa clásica.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Bolognesa",
        },
        {
          id: 8,
          titulo: "Spaghetti meatballs",
          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
        },
        {
          id: 9,
          titulo: "Spaghetti chicken parm",
          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
        },
        {
          id: 10,
          titulo: "Fettuccine alfredo",
          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
        },
        {
          id: 11,
          titulo: "Fettuccine toscana",
          descripcion: "Pasta con salsa pesto hecha con albahaca fresca.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Pesto",
        },
        {
          id: 12,
          titulo: "Sopa toscana",
          descripcion: "Pasta con vegetales frescos y un toque de limón.",
          imagen: "https://via.placeholder.com/350x300?text=Pasta+Primavera",
        },
        {
          id: 13,
          titulo: "Sopa tomate",
          descripcion: "Lechuga romana, crutones y aderezo César.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Cesar",
        },
        {
          id: 14,
          titulo: "Ensalada oliva",
          descripcion: "Tomates, pepino, cebolla y queso feta.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Griega",
        },
        {
          id: 15,
          titulo: "Ensalada mediterranea",
          descripcion: "Quinoa con verduras frescas y aderezo ligero.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Quinoa",
        },
        {
          id: 16,
          titulo: "Ensalada cesar",
          descripcion: "Mozzarella fresca, tomate y albahaca.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
        },
        {
          id: 17,
          titulo: "Arancinis",
          descripcion: "Mozzarella fresca, tomate y albahaca.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
        },
        {
          id: 18,
          titulo: "Lasagna Italiana",
          descripcion: "Mozzarella fresca, tomate y albahaca.",
          imagen: "https://via.placeholder.com/350x300?text=Ensalada+Caprese",
        },
      ];

const categorias = {
  Focaccias:productos.filter((p) => p.titulo.includes("Focaccia")),
  Pastas:productos.filter((p) => p.titulo.includes("Spaghetti") || p.titulo.includes("Fettuccine")),
  Ensaladas:productos.filter((p) => p.titulo.includes("Ensalada")),
  Sopas:productos.filter((p) => p.titulo.includes("Sopa")),
  Variedades:productos.filter ((p) => p.titulo.includes("Arancinis") || p.titulo.includes("Lasagna"))
};

  return (
    <div className="mx-6 mb-10 md:mx-10">
      {Object.entries(categorias).map(([categoria, productos]) => (
        <div key={categoria} className="mb-10">
          <h2 className="text-2xl font-bold text-slate-800 mb-4">{categoria}</h2>
          <hr className="mb-6 border-2 border-lime-700" />
          <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
            {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>
        </div>
      ))}
    </div>
  );
};

export default ProductList;
