import { ArrowRight } from 'lucide-react';

import { PropsWithChildren } from 'react';

import { Link } from '@inertiajs/react';

import { Logo, TextLogo } from '@/Components/branding/Logo';
import CookieConsentBanner from '@/Components/CookieConsent/CookieConsentBanner';
import { MarketingFooter } from '@/Components/marketing/MarketingFooter';
import { Button } from '@/Components/ui/button';
import { ErrorBoundary } from '@/Components/ui/error-boundary';

interface MarketingLayoutProps extends PropsWithChildren {
  canLogin: boolean;
  canRegister: boolean;
}

export default function MarketingLayout({ children, canLogin, canRegister }: MarketingLayoutProps) {
  return (
    <div className="min-h-screen bg-gradient-to-b from-background to-muted/30">
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-background focus:text-foreground focus:border focus:border-border focus:rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
      >
        Skip to main content
      </a>
      {/* Navigation */}
      <nav className="container flex items-center justify-between py-6">
        <Link href="/" className="flex items-center gap-2">
          <Logo className="h-8 w-8" />
          <TextLogo className="text-xl font-bold" />
        </Link>

        <div className="flex items-center gap-4">
          {canLogin && (
            <Button variant="ghost" asChild>
              <Link href={route('login')}>Log in</Link>
            </Button>
          )}
          {canRegister && (
            <Button asChild>
              <Link href={route('register')}>
                Get Started
                <ArrowRight className="ml-2 h-4 w-4" />
              </Link>
            </Button>
          )}
        </div>
      </nav>

      <main id="main-content">
        <ErrorBoundary>{children}</ErrorBoundary>
      </main>

      <MarketingFooter />

      <CookieConsentBanner />
    </div>
  );
}