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, Card, Badge } from '../../components/ui';

interface RecentPostsProps {
  locale: string;
}

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

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

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

        <ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
          {recentPosts.map((post) => (
            <li key={post.slug}>
              <Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
                <Card
                  tag="article"
                  className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
                >
                  {post.frontmatter.featuredImage && (
                    <div className="relative h-64 overflow-hidden">
                      <Image
                        src={post.frontmatter.featuredImage}
                        alt={post.frontmatter.title}
                        fill
                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                        sizes="(max-width: 768px) 100vw, 33vw"
                        loading="lazy"
                      />
                      <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                      {post.frontmatter.category && (
                        <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
                          {post.frontmatter.category}
                        </Badge>
                      )}
                    </div>
                  )}
                  <div className="p-6 md:p-8 flex flex-col flex-grow">
                    <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
                      <span className="w-6 md:w-8 h-px bg-neutral-medium" />
                      <time dateTime={post.frontmatter.date}>
                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric',
                        })}
                      </time>
                    </div>
                    <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
                      {post.frontmatter.title}
                    </h3>
                    <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
                      {t('readMore')}
                      <svg
                        className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M17 8l4 4m0 0l-4 4m4-4H3"
                        />
                      </svg>
                    </div>
                  </div>
                </Card>
              </Link>
            </li>
          ))}
        </ul>
      </Container>
    </Section>
  );
}