import Link from "next/link";
import { Building2, MapPinned, Landmark, CreditCard, ReceiptText, Gauge, Layers3 } from "lucide-react";

const items = [
  { name: "Sectores", href: "/mantenedores/sectores", icon: MapPinned, desc: "Sectores de la APR" },
  { name: "Tramos", href: "/mantenedores/tramos", icon: Layers3, desc: "Tarifas / detalle tipo cañería" },
  { name: "Tipo Medidores", href: "/mantenedores/tipo-medidores", icon: Gauge, desc: "Tipos de medidor" },
  { name: "Tipos Documento", href: "/mantenedores/tipos-documento", icon: ReceiptText, desc: "Tipos de documento" },
  { name: "Ciudades", href: "/mantenedores/ciudades", icon: Building2, desc: "Ciudades" },
  { name: "Comunas", href: "/mantenedores/comunas", icon: Building2, desc: "Comunas" },
  { name: "Bancos", href: "/mantenedores/bancos", icon: Landmark, desc: "Bancos" },
  { name: "Cuentas Banco", href: "/mantenedores/cuentas-banco", icon: CreditCard, desc: "Cuentas bancarias" },
];

export default function MantenedoresPage() {
  return (
    <div>
      <h1 className="page-title">Mantenedores</h1>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {items.map((item) => (
          <Link key={item.href} href={item.href} className="card hover:shadow-lg transition-shadow">
            <div className="flex items-center gap-4">
              <div className="bg-gray-800 p-3 rounded-lg text-white">
                <item.icon className="w-6 h-6" />
              </div>
              <div>
                <h3 className="font-semibold text-gray-900">{item.name}</h3>
                <p className="text-sm text-gray-500">{item.desc}</p>
              </div>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}