import type { Metadata } from 'next';
import { Inter, Playfair_Display } from 'next/font/google';
import './globals.css';
import { SiteHeader } from '@/components/layout/site-header';
import { SiteFooter } from '@/components/layout/site-footer';
import { getCurrentAccount } from '@/lib/account';
import { CartProvider } from '@/lib/cart-context';

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
});

const playfair = Playfair_Display({
  subsets: ['latin'],
  weight: ['500', '600', '700'],
  variable: '--font-playfair',
  display: 'swap',
});

export const metadata: Metadata = {
  title: {
    default: 'CeylonHandicrafts.lk | Discover the Soul of Sri Lankan Crafts',
    template: '%s | CeylonHandicrafts.lk',
  },
  description:
    "Authentic Sri Lankan handicrafts marketplace - shop handmade wood carvings, brass work, masks, batik, pottery and jewellery, or join as a vendor and sell your own creations.",
};

export default async function RootLayout({ children }: { children: React.ReactNode }) {
  // Reads the account cookie (if any) once per request and hands the
  // logged-in state down to the header — see src/lib/account.ts.
  const account = await getCurrentAccount();

  return (
    <html lang="en" className={`${inter.variable} ${playfair.variable}`}>
      <body className="flex min-h-screen flex-col bg-white font-sans">
        <CartProvider>
          <SiteHeader account={account} />
          <main className="flex-1">{children}</main>
          <SiteFooter />
        </CartProvider>
      </body>
    </html>
  );
}
