import type { Metadata, Viewport } from 'next';
import { Poppins } from 'next/font/google';
import Link from 'next/link';
import { Shell } from '@/components/Shell';
import { Providers } from '@/components/Providers';
import './globals.css';

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

// Previews need absolute image URLs. In production the API lives at <site>/api, so its origin is the site's.
const siteUrl = process.env.SITE_URL ?? new URL(process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3737').origin;

export const metadata: Metadata = {
  metadataBase: new URL(siteUrl),
  title: 'musicshare',
  description: "See what your friends are listening to, and play it on your own service.",
  applicationName: 'musicshare',
  // iOS "Add to Home Screen": open full-screen with a dark status bar.
  appleWebApp: { capable: true, title: 'musicshare', statusBarStyle: 'black-translucent' },
};

export const viewport: Viewport = {
  themeColor: '#2a2942',
  viewportFit: 'cover',
};

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={poppins.variable}>
      <body>
        <Providers>
          <Shell
            footer={
              <footer className="footer">
                <Link href="/privacy">Privacy</Link>
                <Link href="/terms">Terms</Link>
                <a href="mailto:app@musicshare.binarygnome.com">Contact</a>
              </footer>
            }
          >
            {children}
          </Shell>
        </Providers>
      </body>
    </html>
  );
}