---
import BaseLayout from '../../layouts/BaseLayout.astro';
import Header from '../../components/Header.astro';
import Footer from '../../components/Footer.astro';
import { getBlogPostBySlug, getBlogPosts } from '../../utils/directus';
import { useTranslations } from '../../utils/i18n';

export async function getStaticPaths() {
  const posts = await getBlogPosts();
  
  return posts
    .filter((post) => typeof post.slug === 'string' && post.slug.trim() !== '')
    .map((post) => ({
      params: { slug: post.slug },
      props: { post },
    }));
}

const { post } = Astro.props;
const t = await useTranslations('en');
---

<BaseLayout title={`${post.title} | ${t('blog.title')}`} description={post.content.replace(/<[^>]+>/g, '').substring(0, 160)}>
  <Header />
  
  <main class="flex-1">
    <!-- Hero Section -->
    <section class="bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 py-20">
      <div class="container-custom">
        <div class="max-w-4xl mx-auto">
          <nav class="mb-6">
            <a href="/en/blog" class="text-primary hover:underline flex items-center">
              ← {t('blog.backToBlog')}
            </a>
          </nav>
          <header class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
              {post.title}
            </h1>
            <p class="text-xl text-gray-600 dark:text-gray-300">
              {new Date(post.date_created).toLocaleDateString('en-US', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
              })}
            </p>
          </header>
        </div>
      </div>
    </section>

    <!-- Article Content -->
    <section class="py-16">
      <div class="container-custom">
        <article class="max-w-4xl mx-auto">
          <div class="prose prose-lg dark:prose-invert max-w-none prose-headings:text-gray-900 dark:prose-headings:text-white prose-p:text-gray-700 dark:prose-p:text-gray-300 prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-strong:text-gray-900 dark:prose-strong:text-white prose-code:text-primary prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-code:px-1 prose-code:py-0.5 prose-code:rounded" set:html={post.content}></div>
          
          <!-- Back to Blog Button -->
          <div class="mt-12 pt-8 border-t border-border text-center">
            <a href="/en/blog" class="btn btn-primary">
              ← {t('blog.backToBlog')}
            </a>
          </div>
        </article>
      </div>
    </section>
  </main>

  <Footer />
</BaseLayout>