import { useEffect, useState } from "react";

export default function Carrito() {
  const [carrito, setCarrito] = useState([]);

  useEffect(() => {
    const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
    setCarrito(carritoGuardado);
  }, []);

  return (
    <div className="p-4 max-w-3xl mx-auto">
      <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
      {carrito.length === 0 ? (
        <p className="text-gray-600">No hay conciertos en el carrito.</p>
      ) : (
        carrito.map((item, index) => (
          <div key={index} className="border p-4 mb-2 rounded-lg">
            <p className="text-lg font-semibold">{item.nombre}</p>
            <p className="text-sm text-gray-600">Fecha: {item.fecha}</p>
            <p className="text-sm text-gray-600">Asiento: {item.asiento}</p>
          </div>
        ))
      )}
    </div>
  );
}
