klz-cables.com/components/home/RecentPosts.tsx

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

interface RecentPostsProps {
  locale: string;
  data?: any;
}

export default async function RecentPosts({ locale, data }: RecentPostsProps) {
  const t = await getTranslations('Blog');
  const posts = await getAllPosts(locale);
  const recentPosts = posts.slice(0, 4);

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

  const title = data?.title || t('allArticles');
  const subtitle = data?.subtitle || t('latestNews');

  return (
    <Section className="bg-neutral-light py-0 md:py-0 lg:py-0">
      <Container className="py-12 md:py-16">
        <div className="flex flex-col md:flex-row items-start md:items-end justify-between gap-6">
          <Heading level={2} subtitle={subtitle} className="mb-0 text-primary">
            {title}
          </Heading>
          <Link
            href={`/${locale}/blog`}
            className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
          >
            {title}
            <span className="ml-2 transition-transform group-hover:translate-x-2">&rarr;</span>
          </Link>
        </div>
      </Container>

      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 m-0 p-0 list-none">
        {recentPosts.map((post, idx) => (
          <li key={`${post.slug}-${idx}`} className="block">
            <Link
              href={`/${locale}/blog/${post.slug}`}
              className="group block relative h-[400px] md:h-[500px] lg:h-[650px] overflow-hidden border-b md:border-b-0 md:border-r border-white/10 last:border-0 focus:outline-none"
            >
              {post.frontmatter.featuredImage && (
                <>
                  <Image
                    src={post.frontmatter.featuredImage.split('?')[0]}
                    alt={post.frontmatter.title}
                    fill
                    className="object-cover transition-transform duration-1000 group-hover:scale-110"
                    style={{
                      objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
                    }}
                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
                    loading="lazy"
                  />
                  <div className="absolute inset-0 bg-primary-dark/40 group-hover:bg-primary-dark/60 transition-all duration-500" />
                </>
              )}

              <div className="absolute inset-0 p-8 md:p-10 flex flex-col justify-end text-white">
                <div className="mb-4 md:mb-6 transform transition-all duration-500 group-hover:-translate-y-4">
                  <div className="flex flex-wrap items-center gap-2 mb-4">
                    {post.frontmatter.category && (
                      <span className="px-3 py-1 bg-accent text-primary-dark rounded-full text-[10px] md:text-xs font-bold uppercase tracking-wider shadow-sm">
                        {post.frontmatter.category}
                      </span>
                    )}
                    <time
                      dateTime={post.frontmatter.date}
                      suppressHydrationWarning
                      className="px-3 py-1 text-white/80 text-[10px] md:text-xs font-bold uppercase tracking-widest border border-white/20 rounded-full bg-white/10 backdrop-blur-md"
                    >
                      {new Date(post.frontmatter.date).toLocaleDateString(locale || 'de', {
                        year: 'numeric',
                        month: 'short',
                        day: 'numeric',
                      })}
                    </time>
                    {(new Date(post.frontmatter.date) > new Date() ||
                      post.frontmatter.public === false) && (
                      <span className="px-2 py-0.5 border border-white/40 text-white/90 rounded uppercase tracking-widest text-[10px] md:text-xs font-bold bg-neutral-dark/40 shadow-sm">
                        Draft Preview
                      </span>
                    )}
                  </div>
                  <h3 className="text-xl md:text-2xl font-bold mb-2 md:mb-4 leading-tight drop-shadow-md">
                    {post.frontmatter.title}
                  </h3>
                </div>
                <div className="flex items-center text-accent font-bold tracking-wider uppercase text-xs md:text-xs opacity-100 md:opacity-0 group-hover:opacity-100 transition-all duration-500 delay-100">
                  {t('readMore')}{' '}
                  <span className="ml-2 transition-transform group-hover:translate-x-2">
                    &rarr;
                  </span>
                </div>
              </div>
            </Link>
          </li>
        ))}
      </ul>
    </Section>
  );
}