import Link from "next/link";
import type { ArticleMeta, Section } from "@/lib/types";
import type { Locale } from "@/lib/i18n";
import { sectionLabel } from "@/lib/sections";

export default function Sidebar({
  sections,
  latest,
  hot,
  locale,
}: {
  sections: Section[];
  latest: ArticleMeta[];
  hot: ArticleMeta[];
  locale: Locale;
}) {
  const t =
    locale === "zh"
      ? { explore: "探索栏目", latest: "最新文章", hot: "热门趋势" }
      : locale === "en"
      ? { explore: "Explore", latest: "Latest", hot: "Trending" }
      : { explore: "Explorar", latest: "Últimas noticias", hot: "Tendencias" };

  return (
    <aside className="sidebar">
      {/* Explore sections */}
      <div className="card">
        <div className="sidebar-section-title">{t.explore}</div>
        <div className="sidebar-explore">
          {sections.map((s) => (
            <Link
              key={s.id}
              className="badge"
              href={`/${locale}/section/${s.id}`}
            >
              {sectionLabel(locale, s.id)}
            </Link>
          ))}
        </div>
      </div>

      {/* Latest articles */}
      <div className="card">
        <div className="sidebar-section-title">{t.latest}</div>
        <div>
          {latest.slice(0, 6).map((a) => (
            <Link key={a.slug} href={`/${locale}/article/${a.slug}`} className="sidebar-article">
              <div className="sidebar-article-date">{a.date}</div>
              <div className="sidebar-article-title">{a.title}</div>
            </Link>
          ))}
        </div>
      </div>

      {/* Trending */}
      <div className="card">
        <div className="sidebar-section-title">{t.hot}</div>
        <div>
          {hot.slice(0, 5).map((a) => (
            <Link key={a.slug} href={`/${locale}/article/${a.slug}`} className="sidebar-article">
              <div className="sidebar-article-title">{a.title}</div>
              {a.excerpt && (
                <div className="sidebar-article-date" style={{ marginTop: 4 }}>
                  {a.excerpt.slice(0, 80).trimEnd()}…
                </div>
              )}
            </Link>
          ))}
        </div>
      </div>
    </aside>
  );
}