---
import Layout from './Layout.astro';
import { type Lang } from '@/types/i18n';
import { defaultLang } from '@/i18n/ui';
import GlassHeader from '@/components/GlassHeader';
import Footer from '@/components/Footer';

export interface Props {
  title: string;
  description?: string;
}

const { title, description = 'Explore my latest thoughts on coding, tech trends, and developer life.' } = Astro.props;
const lang = Astro.currentLocale as Lang || defaultLang;
---

<Layout title={title} description={description}>
  <!-- Enhanced background with gradient overlay for better visual consistency -->
  <div class="fixed inset-0 -z-10 h-full w-full bg-background">
    <!-- Additional subtle gradient for blog pages -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-50/30 via-transparent to-blue-50/20 dark:from-blue-950/20 dark:via-transparent dark:to-blue-950/10"></div>
  </div>
  
  <!-- Glass Header with navigation -->
  <GlassHeader lang={lang} client:load transition:persist="header" />
  
  <!-- Main content with proper spacing for fixed header -->
  <div class="pt-16">
    <slot />
  </div>
  
  <!-- Footer -->
  <Footer client:load />
</Layout>
