/** 移动端"我"聚合页:头像占位+入口列表 */
import { NavLink } from 'react-router-dom'
import { User, History, BookOpen, Settings as SettingsIcon, ChevronRight } from 'lucide-react'
import { getName } from '@/lib/auth'

export function Me() {
  const name = getName()
  const items = [
    { path: '/profile', label: '我的画像', icon: User },
    { path: '/history', label: '对话历史', icon: History },
    { path: '/knowledge', label: '知识库', icon: BookOpen },
    { path: '/settings', label: '设置', icon: SettingsIcon },
  ]
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-3 rounded-xl border border-border bg-card p-4">
        <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary font-bold">
          {name?.[0] || '老'}
        </div>
        <div>
          <div className="font-semibold text-foreground">{name || '老板'}</div>
          <div className="text-sm text-muted-foreground">中小企业老板</div>
        </div>
      </div>
      <div className="rounded-xl border border-border bg-card divide-y divide-border">
        {items.map((item) => (
          <NavLink key={item.path} to={item.path} className="flex items-center gap-3 p-4 hover:bg-muted transition-colors">
            <item.icon className="h-5 w-5 text-muted-foreground" />
            <span className="flex-1 text-sm text-foreground">{item.label}</span>
            <ChevronRight className="h-4 w-4 text-muted-foreground" />
          </NavLink>
        ))}
      </div>
    </div>
  )
}