import Link from "next/link";
import { BookOpen, Bot, Boxes, Building2, CreditCard, Database, LayoutDashboard, Server, Settings } from "lucide-react";
import type { Locale } from "@/lib/i18n";
import { getDictionary } from "@/lib/i18n";

const items = [
  { href: "/dashboard", label: "overview", icon: LayoutDashboard },
  { href: "/dashboard/company", label: "company", icon: Building2 },
  { href: "/dashboard/workspace", label: "workspace", icon: Building2 },
  { href: "/dashboard/automations", label: "automations", icon: Bot },
  { href: "/dashboard/instances", label: "hermes", icon: Server },
  { href: "/dashboard/odoo", label: "odoo", icon: Database },
  { href: "/dashboard/billing", label: "billing", icon: CreditCard },
  { href: "/dashboard/documentation", label: "documentation", icon: BookOpen },
  { href: "/dashboard/settings", label: "settings", icon: Settings }
] as const;

export function Sidebar({ locale }: { locale: Locale }) {
  const t = getDictionary(locale).dashboardNav;

  return (
    <aside className="hidden min-h-screen w-64 border-r border-slate-200 bg-white px-4 py-5 lg:block">
      <Link href="/dashboard" className="flex items-center gap-2 font-bold text-ink">
        <span className="flex h-9 w-9 items-center justify-center rounded-md bg-amber text-white">
          <Boxes size={19} />
        </span>
        wakelai.com
      </Link>
      <nav className="mt-8 grid gap-1">
        {items.map((item) => (
          <Link key={item.href} href={item.href} className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-ink">
            <item.icon size={18} />
            {t[item.label]}
          </Link>
        ))}
      </nav>
    </aside>
  );
}