---
import { getCollection, type CollectionEntry } from 'astro:content';
import { Icon } from 'astro-icon/components';
import Layout from '../../layouts/Layout.astro';

export const prerender = true;

export async function getStaticPaths() {
  const posts = await getCollection('posts');
  return posts.map((post: CollectionEntry<'posts'>) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post }: { post: CollectionEntry<'posts'> } = Astro.props;
const { Content } = await post.render();
---

<Layout>
  <div class="min-h-screen p-4 md:p-8">
    <div class="max-w-3xl mx-auto">
      <div class="p-4 md:p-8">
        <h1 class="text-4xl md:text-5xl font-bold text-primary mb-6">
          {post.data.title}
        </h1>

        <div class="flex flex-wrap items-center gap-4 mb-6">
          <div class="flex items-center flex-row gap-2 text-base-content opacity-75">
            <Icon name="mdi:clock" class="text-xl" />
            <time datetime={post.data.pubDate.toISOString()}>
              {new Date(post.data.pubDate).toLocaleDateString('en-us', {
                month: 'long',
                day: 'numeric',
                year: 'numeric',
              })}
            </time>
          </div>

          {/* Back button */}
          <a href="/posts" class="btn btn-outline btn-primary btn-sm">
            <Icon name="mdi:arrow-left" class="text-lg" />
            Back
          </a>
        </div>
        
        {post.data.tags && post.data.tags.length > 0 && (
          <div class="flex gap-2 flex-wrap mb-6">
            {post.data.tags.map((tag: string) => (
              <span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
                <Icon name="mdi:tag" class="text-lg" />
                {tag}
              </span>
            ))}
          </div>
        )}

        <article class="prose prose-lg dark:prose-invert max-w-none mt-6">
          <Content />
        </article>
      </div>
    </div>
  </div>
</Layout>