import Link from "next/link";
import type { Guide } from "@/lib/guides";
import { getGuide } from "@/lib/guides";

export default function RelatedGuideArticles({ guide }: { guide: Guide }) {
  const relatedGuides = guide.relatedGuides
    .map((slug) => getGuide(slug))
    .filter((related): related is Guide => Boolean(related));

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

  return (
    <aside className="mt-12 rounded-3xl border border-line bg-surface p-6 shadow-soft">
      <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[#0d7a57]">Weiterlesen</p>
      <h2 className="mt-3 font-display text-2xl font-semibold text-ink">Das könnte dich auch interessieren</h2>
      <div className="mt-5 grid gap-4 sm:grid-cols-2">
        {relatedGuides.map((related) => (
          <Link
            key={related.slug}
            href={`/ratgeber/${related.slug}`}
            className="rounded-2xl border border-line p-4 transition-colors hover:border-[#0d7a57]/40 hover:bg-[#e6f7f0]/40"
          >
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-[#0d7a57]">{related.readingTime}</p>
            <h3 className="mt-2 font-display text-xl font-semibold leading-tight text-ink">{related.title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-ink-soft">{related.excerpt}</p>
          </Link>
        ))}
      </div>
    </aside>
  );
}