import React from 'react';
import Link from 'next/link';
import { getAllPosts } from '@/lib/blog';
import { getTranslations } from 'next-intl/server';
import { Section, Container } from '../../components/ui';

interface RecentPostsProps {
  locale: string;
}

export default async function RecentPosts({ locale }: RecentPostsProps) {
  const t = await getTranslations('Footer'); // Reusing recentPosts title from Footer or Index
  const posts = await getAllPosts(locale);
  const recentPosts = posts.slice(0, 3);

  if (recentPosts.length === 0) return null;

  return (
    <Section className="bg-neutral-light py-24">
      <Container>
        <div className="flex items-center justify-between mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-text-primary">
            {locale === 'de' ? 'Aktuelle Blogbeiträge' : 'Recent Blog Posts'}
          </h2>
          <Link href={`/${locale}/blog`} className="text-primary font-bold hover:underline">
            {locale === 'de' ? 'Alle Beiträge ansehen' : 'View all posts'} &rarr;
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {recentPosts.map((post) => (
            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all border border-neutral">
              {post.frontmatter.featuredImage && (
                <div className="relative h-48 overflow-hidden">
                  <img 
                    src={post.frontmatter.featuredImage} 
                    alt={post.frontmatter.title}
                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                </div>
              )}
              <div className="p-6">
                <div className="text-xs text-text-secondary mb-2">
                  {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                  })}
                </div>
                <h3 className="text-xl font-bold text-text-primary group-hover:text-primary transition-colors line-clamp-2 mb-4">
                  {post.frontmatter.title}
                </h3>
                <span className="text-primary text-sm font-bold inline-flex items-center">
                  {locale === 'de' ? 'Weiterlesen' : 'Read more'} &rarr;
                </span>
              </div>
            </Link>
          ))}
        </div>
      </Container>
    </Section>
  );
}
