klz-cables.com/components/blog/PostNavigation.tsx

import React from 'react';
import Link from 'next/link';
import { PostMdx } from '@/lib/blog';

interface PostNavigationProps {
  prev: PostMdx | null;
  next: PostMdx | null;
  isPrevRandom?: boolean;
  isNextRandom?: boolean;
  locale: string;
}

export default function PostNavigation({
  prev,
  next,
  isPrevRandom,
  isNextRandom,
  locale,
}: PostNavigationProps) {
  if (!prev && !next) return null;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 w-full mt-16">
      {/* Previous Post (Older) */}
      {prev ? (
        <Link
          href={`/${locale}/blog/${prev.slug}`}
          className="group relative h-64 md:h-80 overflow-hidden block"
        >
          {/* Background Image */}
          {prev.frontmatter.featuredImage ? (
            <div
              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
              style={{ backgroundImage: `url(${prev.frontmatter.featuredImage.split('?')[0]})` }}
            />
          ) : (
            <div className="absolute inset-0 bg-neutral-100" />
          )}

          {/* Overlay */}
          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />

          {/* Content */}
          <div className="absolute inset-0 flex flex-col justify-center p-8 md:p-12 text-white z-10">
            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
              {isPrevRandom
                ? locale === 'de'
                  ? 'Weiterer Artikel'
                  : 'More Article'
                : locale === 'de'
                  ? 'Vorheriger Beitrag'
                  : 'Previous Post'}
            </span>
            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
              {prev.frontmatter.title}
            </h3>
          </div>

          {/* Arrow Icon */}
          <div className="absolute left-4 top-1/2 -translate-y-1/2 text-white/70 group-hover:text-white group-hover:-translate-x-2 transition-all duration-300">
            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M15 19l-7-7 7-7"
              />
            </svg>
          </div>
        </Link>
      ) : (
        <div className="hidden md:block bg-neutral-50" />
      )}

      {/* Next Post (Newer) */}
      {next ? (
        <Link
          href={`/${locale}/blog/${next.slug}`}
          className="group relative h-64 md:h-80 overflow-hidden block"
        >
          {/* Background Image */}
          {next.frontmatter.featuredImage ? (
            <div
              className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
              style={{ backgroundImage: `url(${next.frontmatter.featuredImage.split('?')[0]})` }}
            />
          ) : (
            <div className="absolute inset-0 bg-neutral-100" />
          )}

          {/* Overlay */}
          <div className="absolute inset-0 bg-black/60 group-hover:bg-black/50 transition-colors duration-300" />

          {/* Content */}
          <div className="absolute inset-0 flex flex-col justify-center items-end text-right p-8 md:p-12 text-white z-10">
            <span className="text-sm font-bold uppercase tracking-wider mb-2 text-white/90">
              {isNextRandom
                ? locale === 'de'
                  ? 'Weiterer Artikel'
                  : 'More Article'
                : locale === 'de'
                  ? 'Nächster Beitrag'
                  : 'Next Post'}
            </span>
            <h3 className="text-xl md:text-2xl font-bold leading-tight group-hover:underline decoration-2 underline-offset-4">
              {next.frontmatter.title}
            </h3>
          </div>

          {/* Arrow Icon */}
          <div className="absolute right-4 top-1/2 -translate-y-1/2 text-white/30 group-hover:text-white group-hover:translate-x-2 transition-all duration-300">
            <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
          </div>
        </Link>
      ) : (
        <div className="hidden md:block bg-neutral-50" />
      )}
    </div>
  );
}