/** صفحه اصلی حساب کاربری */
import Link from "next/link";
import { NameEditor, SignOutButton } from "./AccountActions";
import { faDigits } from "@/lib/format";
import { Icon, type IconName } from "@/components/ui/Icon";

const links: { href: string; label: string; hint: string; icon: IconName }[] = [
  { href: "/account/orders", label: "سفارش‌های من", hint: "وضعیت و جزئیات سفارش‌ها", icon: "box" },
  { href: "/account/addresses", label: "آدرس‌ها", hint: "مدیریت آدرس‌های تحویل", icon: "pin" },
  { href: "/track", label: "پیگیری سفارش", hint: "با شماره سفارش", icon: "truck" },
];

export function AccountHome({ phone, name }: { phone: string; name?: string | null }) {
  return (
    <div className="mx-auto max-w-xl">
      <div className="flex items-center gap-4 rounded-3xl bg-ink p-6 text-paper">
        <span className="grid size-14 place-items-center rounded-full bg-paper/10">
          <Icon name="user" size={28} />
        </span>
        <div>
          <p className="text-lg font-bold">{name ? `سلام ${name}` : "سلام، خوش آمدید"}</p>
          <bdi className="text-sm text-paper/70">{faDigits(phone)}</bdi>
          <NameEditor name={name} />
        </div>
      </div>
      <ul className="mt-6 divide-y divide-line">
        {links.map((l) => (
          <li key={l.href}>
            <Link href={l.href} className="flex items-center gap-4 py-4">
              <Icon name={l.icon} />
              <span className="flex-1">
                <span className="block text-sm font-bold">{l.label}</span>
                <span className="text-xs text-muted">{l.hint}</span>
              </span>
              <Icon name="chevron-left" size={18} />
            </Link>
          </li>
        ))}
        <li>
          <SignOutButton />
        </li>
      </ul>
    </div>
  );
}