import type { Metadata } from 'next';
import { getAllPosts } from './utils';
import {
  BlogBackground,
  BlogArticleCard,
  BlogPageHeader,
  // BlogSearchInput,
  // BlogCategories,
  BlogNewsletter,
  // BlogTags,
} from './_components';

export const metadata: Metadata = {
  title: 'Blog | Banatie',
  description:
    'Articles, guides, and updates about AI-powered placeholder images.',
};

// const defaultTags = ['ai', 'image-generation', 'api', 'midjourney', 'flux'];

export default function BlogPage() {
  const posts = getAllPosts();
  // const categories = getCategories();

  return (
    <>
      <BlogBackground />
      <main className="flex-grow bg-transparent relative z-10 pt-10 pb-12 lg:pt-16 lg:pb-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12">
            <div className="lg:col-span-8 xl:col-span-9">
              <BlogPageHeader />

              <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
                {posts.map((post) => (
                  <BlogArticleCard key={post.slug} post={post} />
                ))}
              </div>

              {posts.length === 0 && (
                <p className="text-gray-500 text-center py-12">
                  No articles yet. Check back soon!
                </p>
              )}

              {posts.length > 6 && (
                <div className="mt-16 flex justify-center">
                  <button className="px-6 py-3 rounded-lg border border-white/10 bg-[#111827] text-sm font-medium text-white hover:bg-white/5 transition-colors">
                    Load More Articles
                  </button>
                </div>
              )}
            </div>

            <aside className="lg:col-span-4 xl:col-span-3 space-y-8">
              {/* <BlogSearchInput /> */}
              {/* <BlogCategories categories={categories} /> */}
              <BlogNewsletter />
              {/* <BlogTags tags={defaultTags} /> */}
            </aside>
          </div>
        </div>
      </main>
    </>
  );
}