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;
  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, 3);

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

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

  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={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>

        <ul className="grid grid-cols-1 gap-10 list-none p-0 m-0">
          {recentPosts.map((post, idx) => (
            <li key={`${post.slug}-${idx}`}>
              <Link
                href={`/${locale}/blog/${post.slug}`}
                className="group block h-full focus:outline-none"
              >
                <Card
                  tag="article"
                  className="relative flex flex-col justify-end border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl overflow-hidden min-h-[400px] md:min-h-[450px]"
                >
                  {post.frontmatter.featuredImage && (
                    <>
                      <Image
                        src={post.frontmatter.featuredImage.split('?')[0]}
                        alt={post.frontmatter.title}
                        fill
                        className="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
                        style={{
                          objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
                        }}
                        sizes="(max-width: 768px) 100vw, 100vw"
                        loading="lazy"
                      />
                      <div className="absolute inset-0 bg-neutral-dark/10 group-hover:bg-neutral-dark/5 transition-colors duration-500" />
                    </>
                  )}

                  <div className="relative z-10 w-full p-6 md:p-8 bg-gradient-to-t from-neutral-dark/90 via-neutral-dark/60 to-transparent flex flex-col pt-32">
                    <div className="flex flex-wrap items-center gap-4 mb-4">
                      {post.frontmatter.category && (
                        <Badge variant="accent" className="shadow-md">
                          {post.frontmatter.category}
                        </Badge>
                      )}
                      {(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>

                    <div className="flex items-center gap-3 text-xs md:text-sm font-bold text-white/80 mb-3 tracking-widest uppercase">
                      <time dateTime={post.frontmatter.date} suppressHydrationWarning>
                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
                          year: 'numeric',
                          month: 'long',
                          day: 'numeric',
                        })}
                      </time>
                    </div>

                    <h3 className="text-xl md:text-2xl font-bold text-white mb-4 group-hover:text-accent transition-colors drop-shadow-md leading-tight max-w-4xl">
                      {post.frontmatter.title}
                    </h3>

                    <div className="mt-auto flex items-center justify-between border-t border-white/20 pt-6">
                      <span className="text-accent text-sm md:text-base font-extrabold group-hover:text-white transition-colors">
                        {t('readMore')}
                      </span>
                      <div className="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-accent group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 backdrop-blur-sm border border-white/20">
                        <svg
                          className="w-5 h-5 transition-transform group-hover:translate-x-1"
                          fill="none"
                          stroke="currentColor"
                          viewBox="0 0 24 24"
                        >
                          <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M17 8l4 4m0 0l-4 4m4-4H3"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </Card>
              </Link>
            </li>
          ))}
        </ul>
      </Container>
    </Section>
  );
}