import { type Locale, useTranslations } from "next-intl";
import JrPostCard from "@/components/blog/JrPostCard";
import { categorySlug } from "@/config/blog/categories";
import { Link } from "@/i18n/navigation";
import { getAllPosts, getFeatured } from "@/lib/blog";

export default function JournalFeatured({ locale }: { locale: Locale }) {
  const t = useTranslations("BlogPage");
  const all = getAllPosts(locale);
  const hero = getFeatured(locale, 1)[0];
  if (!hero) {
    return null;
  }
  const rest = all.filter((p) => p.postId !== hero.postId);
  const compact = rest.slice(0, 2);
  const latest = all.slice(0, 5);

  return (
    <section className="bg-background px-6 pb-[76px] pt-4 lg:px-16 lg:pb-[104px]">
      <div className="reveal mx-auto grid max-w-[1440px] grid-cols-1 gap-6 lg:grid-cols-[270px_1fr_300px]">
        {/* Two recent non-featured posts. */}
        <div className="flex flex-col gap-6 lg:col-start-1 lg:row-start-1">
          {compact.map((p) => (
            <JrPostCard key={p.postId} post={p} locale={locale} variant="compact" />
          ))}
        </div>

        {/* Featured hero — first on mobile. */}
        <div className="order-first lg:order-none lg:col-start-2 lg:row-start-1">
          <JrPostCard post={hero} locale={locale} variant="featured" priority />
        </div>

        {/* Latest panel. */}
        <aside className="flex flex-col border border-hairline bg-surface-container-low p-6 lg:col-start-3 lg:row-start-1">
          <h2 className="mb-4 text-[11px] font-semibold uppercase tracking-[0.2em] text-gold-text">
            {t("latest")}
          </h2>
          <ul>
            {latest.map((p) => (
              <li key={p.postId}>
                <Link
                  href={{
                    pathname: "/[category]/[slug]",
                    params: { category: categorySlug(p.category, locale), slug: p.slug },
                  }}
                  className="group flex items-baseline justify-between gap-4 border-b border-hairline-soft py-3 last:border-b-0"
                >
                  <span className="text-[13.5px] leading-snug text-foreground transition-colors group-hover:text-gold-text">
                    {p.title}
                  </span>
                  <span className="shrink-0 font-display text-[15px] text-gold-text">
                    {new Date(p.date).getFullYear()}
                  </span>
                </Link>
              </li>
            ))}
          </ul>
        </aside>
      </div>
    </section>
  );
}