import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import SEOHead from '../components/seo/SEOHead';
import { useLanguage } from '../contexts/LanguageContext';
import { loadManifest, type ContentMeta } from '../lib/content';

export default function BlogListPage() {
  const { language } = useLanguage();
  const [posts, setPosts] = useState<ContentMeta[]>([]);

  useEffect(() => {
    loadManifest('blog').then(manifest => {
      setPosts(manifest[language] || []);
    });
  }, [language]);

  return (
    <>
      <SEOHead title="Blog" description="TexPixel blog — updates, tutorials, and insights" path="/blog" />
      <div className="max-w-4xl mx-auto py-16 px-6">
        <h1 className="text-3xl font-bold text-gray-900 mb-8">{language === 'en' ? 'Blog' : '博客'}</h1>
        <div className="space-y-6">
          {posts.map((post) => (
            <Link key={post.slug} to={`/blog/${post.slug}`} className="block p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
              <div className="text-xs text-gray-400 mb-2">{post.date}</div>
              <h2 className="text-lg font-semibold text-gray-900">{post.title}</h2>
              <p className="text-gray-600 mt-1 text-sm">{post.description}</p>
              {post.tags.length > 0 && (
                <div className="flex gap-2 mt-3">
                  {post.tags.map(tag => (
                    <span key={tag} className="text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded">{tag}</span>
                  ))}
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </>
  );
}