"use client";

import { BarChart3, Bot, CreditCard, Flag, Home, PieChart, ReceiptText, WalletCards } from "lucide-react";
import { Logo } from "@/components/ui/Logo";

export const navItems = [
  ["overview", "Overview", Home],
  ["transactions", "Transactions", ReceiptText],
  ["budget", "Budget", PieChart],
  ["goals", "Goals", Flag],
  ["networth", "Net Worth", BarChart3],
  ["credit", "Credit & Rewards", CreditCard],
  ["insights", "AI Insights", Bot]
] as const;

export type ViewKey = (typeof navItems)[number][0];

export function Sidebar({ active, onChange }: { active: ViewKey; onChange: (view: ViewKey) => void }) {
  return (
    <aside className="hidden min-h-screen w-72 border-r border-forest/10 bg-paper/80 p-5 dark:border-white/10 dark:bg-white/[0.04] lg:block">
      <Logo />
      <nav className="mt-8 space-y-2">
        {navItems.map(([key, label, Icon]) => (
          <button
            key={key}
            onClick={() => onChange(key)}
            className={`flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-bold transition ${
              active === key ? "bg-forest text-white dark:bg-mint dark:text-ink" : "text-ink/65 hover:bg-forest/8 dark:text-paper/65 dark:hover:bg-white/10"
            }`}
          >
            <Icon size={18} />
            {label}
          </button>
        ))}
      </nav>
      <div className="mt-8 rounded-lg bg-forest/8 p-4 text-sm leading-6 text-ink/65 dark:bg-white/[0.08] dark:text-paper/65">
        <WalletCards className="mb-3 text-forest dark:text-mint" size={20} />
        Plaid sync healthy across 8 of 8 institutions.
      </div>
    </aside>
  );
}