"use client";

import { Card } from "@/components/ui/Card";
import { Button } from "@/components/ui/Button";

const menuItems = [
  { icon: "⚙️", label: "设置", href: "#" },
  { icon: "🔔", label: "通知", href: "#" },
  { icon: "❓", label: "帮助与反馈", href: "#" },
  { icon: "📄", label: "关于我们", href: "#" },
];

export default function ProfilePage() {
  return (
    <div className="space-y-6">
      {/* User Info */}
      <div className="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-6 text-white text-center">
        <div className="w-20 h-20 mx-auto rounded-full bg-white/20 flex items-center justify-center text-3xl backdrop-blur">😊</div>
        <h1 className="text-xl font-bold mt-3">用户昵称</h1>
        <p className="text-sm text-blue-100">138****1234</p>
        <Button variant="ghost" className="mt-3 bg-white/10 text-white hover:bg-white/20" size="sm">编辑资料</Button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-3 gap-3">
        <Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">收藏</p></Card>
        <Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">订单</p></Card>
        <Card className="text-center"><p className="text-xl font-bold text-gray-800">0</p><p className="text-xs text-gray-500">足迹</p></Card>
      </div>

      {/* Menu */}
      <Card className="divide-y divide-gray-50 p-0">
        {menuItems.map((item, i) => (
          <a key={i} href={item.href} className="flex items-center gap-3 px-4 py-3 hover:bg-gray-50 transition-colors">
            <span className="text-lg">{item.icon}</span>
            <span className="flex-1 text-sm text-gray-700">{item.label}</span>
            <svg className="w-4 h-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" /></svg>
          </a>
        ))}
      </Card>
    </div>
  );
}