import Link from 'next/link';
import { requireClient } from '@/lib/session';
import { logout } from '../actions';
import { BellIcon, HeartIcon, InboxIcon, LogOutIcon, SettingsIcon, UserIcon } from '@/components/Icons';

const NAV = [
  { href: '/account/', label: 'Overview', Icon: UserIcon },
  { href: '/account/enquiries/', label: 'My enquiries', Icon: InboxIcon },
  { href: '/account/saved/', label: 'Saved', Icon: HeartIcon },
  { href: '/account/searches/', label: 'Saved searches', Icon: BellIcon },
  { href: '/account/settings/', label: 'Settings & privacy', Icon: SettingsIcon },
];

export default async function MemberLayout({ children }: { children: React.ReactNode }) {
  const me = await requireClient('/account/');
  return (
    <div className="mx-auto max-w-6xl px-4 py-8 sm:px-6 sm:py-10">
      <div className="grid gap-8 lg:grid-cols-[14rem_1fr]">
        <aside>
          <p className="font-serif text-lg font-semibold">{me.name ?? me.email}</p>
          <p className="truncate text-xs text-muted">{me.email}</p>
          <nav aria-label="Account" className="mt-5 space-y-1 text-sm">
            {NAV.map(({ href, label, Icon }) => (
              <Link key={href} href={href} className="flex items-center gap-2.5 rounded-lg px-3 py-2 font-medium text-ink-2 transition-colors hover:bg-sunken hover:text-ink">
                <Icon className="h-4 w-4" /> {label}
              </Link>
            ))}
          </nav>
          <form action={logout} className="mt-4">
            <button className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-muted hover:text-danger">
              <LogOutIcon className="h-4 w-4" /> Sign out
            </button>
          </form>
        </aside>
        <div className="min-w-0">{children}</div>
      </div>
    </div>
  );
}