import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';
import { useTranslations } from 'next-intl';

interface BlogIndexProps {
  params: {
    locale: string;
  };
}

export default async function BlogIndex({ params: { locale } }: BlogIndexProps) {
  const posts = await getAllPosts(locale);

  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-4xl font-bold text-primary mb-8">Blog</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {posts.map((post) => (
          <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group">
            <article className="bg-white rounded-lg shadow-sm overflow-hidden border border-neutral-dark h-full flex flex-col transition-transform hover:-translate-y-1">
              {post.frontmatter.featuredImage && (
                <div className="aspect-video relative overflow-hidden">
                  <img 
                    src={post.frontmatter.featuredImage} 
                    alt={post.frontmatter.title}
                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
                  />
                </div>
              )}
              <div className="p-6 flex flex-col flex-grow">
                <div className="text-sm text-text-secondary mb-2">
                  {new Date(post.frontmatter.date).toLocaleDateString(locale)}
                </div>
                <h2 className="text-xl font-bold text-text-primary mb-3 group-hover:text-primary transition-colors">
                  {post.frontmatter.title}
                </h2>
                <p className="text-text-secondary line-clamp-3 mb-4 flex-grow">
                  {post.frontmatter.excerpt}
                </p>
                <span className="text-primary font-medium group-hover:underline">
                  Read more &rarr;
                </span>
              </div>
            </article>
          </Link>
        ))}
      </div>
    </div>
  );
}