"use client"

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

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 border-border/60 bg-background/80">
      <div className="flex h-14 items-center border-b border-border/60 px-6 font-semibold">
        账号设置
      </div>
      <nav className="p-3 space-y-1">
        {links.map((link) => {
          const Icon = link.icon
          const isActive = pathname === link.href
          return (
            <Button
              key={link.href}
              variant="ghost"
              className={cn(
                "w-full justify-start rounded-md border-l-2 transition-colors h-10",
                isActive
                  ? "border-primary bg-primary/5 text-foreground font-medium"
                  : "border-transparent text-muted-foreground hover:bg-accent/50 hover:text-foreground",
              )}
              asChild
            >
              <Link href={link.href}>
                <Icon className="mr-2 h-4 w-4" />
                {link.label}
              </Link>
            </Button>
          )
        })}
      </nav>
    </aside>
  )
}
