import { Link, useLocation } from "react-router";

const navItems = [
  { route: "/", label: "Explorer", icon: "home" },
  { route: "/status", label: "Status", icon: "notepad" },
  { route: "/transfer", label: "Transfer", icon: "money" }
];

export function Sidebar() {
  const location = useLocation();

  return (
    <aside className="lg:col-span-3">
      <nav className="space-y-1">
        {navItems.map((item) => (
          <Link
            key={item.route}
            to={item.route}
            className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-sm font-medium transition-colors ${
              location.pathname === item.route
                ? "bg-blue-50 text-blue-700 border border-blue-100"
                : "text-slate-600 hover:bg-slate-100"
            }`}
          >
            <img
              src={
                location.pathname === item.route
                  ? `https://img.icons8.com/ios-filled/50/2563eb/${item.icon}.png`
                  : `https://img.icons8.com/ios/50/64748b/${item.icon}.png`
              }
              className="w-5 h-5 shrink-0 object-contain"
              alt={item.label}
            />
            <span>{item.label}</span>
          </Link>
        ))}
      </nav>
    </aside>
  );
}