import Link from "next/link";
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Account",
  robots: { index: false, follow: false },
};

const NAV = [
  { href: "/account", label: "Dashboard", exact: true },
  { href: "/account/orders", label: "Orders" },
  { href: "/account/track", label: "Track order" },
  { href: "/account/returns", label: "Returns & refunds" },
  { href: "/account/reviews", label: "Reviews" },
  { href: "/account/coupons", label: "Coupons" },
  { href: "/account/payments", label: "Payments" },
  { href: "/account/wishlist", label: "Wishlist" },
  { href: "/account/profile", label: "Profile" },
] as const;

export default function AccountLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="container flex flex-col gap-8 py-10 md:flex-row">
      <aside className="shrink-0 md:w-52">
        <h2 className="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">
          My account
        </h2>
        <nav className="flex flex-col gap-1">
          {NAV.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className="rounded-md px-3 py-2 text-sm font-medium text-slate-900 hover:bg-gray-100"
            >
              {item.label}
            </Link>
          ))}
        </nav>
      </aside>
      <div className="min-w-0 flex-1">{children}</div>
    </div>
  );
}