---
import RecentArticles from '~/components/blog/recent-articles.astro';
import { getImageUrl } from '~/directus';
import { getArticle } from '~/directus/articles/get-article';
import DefaultLayout from '~/layouts/default-layout.astro';

const { slug } = Astro.params;
const article = await getArticle(slug!);

if (!article) {
  return Astro.redirect('/404');
}

---

<DefaultLayout
  title={`DashHub.ai - ${article.title}`}
  description={article.description}
>
  <section class="max-sm:pb-6 pb-16 about-us">
    <article class="mx-auto px-4 flex flex-col items-center">
      <div class="container max-w-full lg:max-w-3xl">
        <nav class="breadcrumb mb-4">
          <ul class="flex space-x-2 text-gray-500 text-sm">
            <li>
              <a href="/" class="hover:underline">Home</a>
            </li>
            <li>/</li>
            <li>
              <a href="/blog" class="hover:underline">Blog</a>
            </li>
            <li>/</li>
            <li class="text-gray-700">{article.title}</li>
          </ul>
        </nav>

        <h1 class="text-4xl font-bold mb-4">{article.title}</h1>
        <p class="mb-2 text-gray-600">
          By {article.author.name} on {new Date(article.published_date).toLocaleDateString()}
        </p>
      </div>

      <div class="h-3 sm:h-5" />

      <img
        src={getImageUrl(article.cover)}
        alt={article.title}
        class="mb-4 w-full h-auto rounded-lg aspect-video lg:max-w-4xl md:h-[400px] md:max-w-3xl md:rounded-xl xl:h-[480px] object-cover"
        loading="lazy"
      />

      <div class="h-4 sm:h-8" />

      <div class="container max-w-full lg:max-w-3xl prose" set:html={article.content} />
    </article>
  </section>

  <RecentArticles className="bg-gray-100" />
</DefaultLayout>
