"use client"

import { Bell, CreditCard, Settings, ShieldCheck } from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"

const links = [
  { href: "/settings", label: "个人设置", icon: Settings },
  { href: "/wallet", label: "钱包", icon: CreditCard },
  { href: "/notifications", label: "通知中心", icon: Bell },
  { href: "/verify", label: "身份认证", icon: ShieldCheck },
]

export function AccountSidebar() {
  const pathname = usePathname()

  return (
    <aside className="w-56 shrink-0 border-r bg-muted/30">
      <div className="flex h-14 items-center border-b px-4 font-semibold">账号设置</div>
      <nav className="p-2 space-y-1">
        {links.map((link) => {
          const Icon = link.icon
          const isActive = pathname === link.href
          return (
            <Button
              key={link.href}
              variant={isActive ? "secondary" : "ghost"}
              className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
              asChild
            >
              <Link href={link.href}>
                <Icon className="h-4 w-4" />
                {link.label}
              </Link>
            </Button>
          )
        })}
      </nav>
    </aside>
  )
}