/**
 * 側邊欄導航元件
 */

import { Users } from "lucide-react";
import { cn } from "./ui/utils";
import { APP_NAME, APP_VERSION, ROUTES } from "../constants/app";

interface NavigationSidebarProps {
  currentPath: string;
  onNavigate: (path: string) => void;
}

interface NavItem {
  path: string;
  icon: React.ElementType;
  label: string;
}

const navItems: NavItem[] = [
  {
    path: ROUTES.VENDOR_MANAGEMENT,
    icon: Users,
    label: "廠商管理",
  },
];

export default function NavigationSidebar({
  currentPath,
  onNavigate,
}: NavigationSidebarProps) {
  return (
    <aside className="w-64 bg-card border-r border-border h-screen flex flex-col">
      {/* 標題 */}
      <div className="px-6 py-5 border-b border-border">
        <h2 className="text-primary-main">{APP_NAME}</h2>
      </div>

      {/* 導航選單 */}
      <nav className="flex-1 overflow-y-auto py-4 px-2">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = currentPath === item.path;
          
          return (
            <button
              key={item.path}
              onClick={() => onNavigate(item.path)}
              className={cn(
                "w-full flex items-center gap-3 px-4 py-3 transition-all rounded-md",
                "hover:bg-background-light",
                isActive && "bg-primary-light/20 font-medium"
              )}
            >
              <span
                className={cn(
                  "flex-shrink-0",
                  isActive ? "text-primary-main" : "text-grey-1"
                )}
              >
                <Icon className="h-5 w-5" />
              </span>
              <span
                className={cn(
                  "transition-colors",
                  isActive ? "text-primary-main" : "text-grey-0"
                )}
              >
                {item.label}
              </span>
            </button>
          );
        })}
      </nav>

      {/* 版本資訊 */}
      <div className="px-6 py-4 border-t border-border">
        <p className="caption text-muted-foreground">版本 {APP_VERSION}</p>
      </div>
    </aside>
  );
}
