import Link from "next/link"

export default function ProfilePage() {
  return (
    <div className="max-w-md mx-auto mt-8 space-y-4">
      <div className="border-b border-border pb-2">
        <h1 className="text-sm font-black uppercase tracking-wide text-foreground">My Profile</h1>
      </div>

      <div className="bg-card border border-border rounded-lg overflow-hidden">
        {/* Avatar */}
        <div className="bg-gradient-to-r from-primary/30 to-primary/10 px-6 py-6 flex items-center gap-4">
          <div className="size-16 bg-primary/20 rounded-full flex items-center justify-center text-2xl border-2 border-primary/30">
            👤
          </div>
          <div>
            <div className="font-bold text-foreground">Guest User</div>
            <div className="text-[11px] text-muted-foreground">Not logged in</div>
            <Link href="/login" className="inline-block mt-2 bg-primary text-primary-foreground text-[11px] font-bold px-3 py-1 rounded hover:opacity-90">
              Login
            </Link>
          </div>
        </div>

        {/* Menu items */}
        <div className="divide-y divide-border">
          {[
            { icon: "🏆", label: "My Bets", href: "/history" },
            { icon: "💰", label: "Deposit", href: "/deposit" },
            { icon: "🎁", label: "Bonus", href: "/bonus" },
            { icon: "🔔", label: "Notifications", href: "/notifications" },
            { icon: "📋", label: "Rules", href: "/rules" },
          ].map((item) => (
            <Link
              key={item.label}
              href={item.href}
              className="flex items-center justify-between px-4 py-3 hover:bg-muted transition-colors group"
            >
              <div className="flex items-center gap-3">
                <span className="text-lg">{item.icon}</span>
                <span className="text-[12px] font-medium text-foreground">{item.label}</span>
              </div>
              <span className="text-muted-foreground group-hover:text-primary transition-colors">›</span>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}