import Link from "next/link";

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">
          <Link
            href="/account/wishlist"
            className="rounded-md px-3 py-2 text-sm font-medium text-slate-900 hover:bg-gray-100"
          >
            Wishlist
          </Link>
          <Link
            href="/account/orders"
            className="rounded-md px-3 py-2 text-sm font-medium text-slate-900 hover:bg-gray-100"
          >
            Orders
          </Link>
        </nav>
      </aside>
      <div className="min-w-0 flex-1">{children}</div>
    </div>
  );
}