"use client";

import { useEffect, useState } from "react";
import { ChangelogList } from "@/components/landing/ChangelogList";
import { fetchChangelog, type ChangelogRelease } from "@/lib/changelog";

type ChangelogRuntimeProps = {
  lang: "en" | "cn";
  initialReleases?: ChangelogRelease[];
};

const text = {
  en: {
    loading: "Loading releases...",
    empty: "No releases found.",
  },
  cn: {
    loading: "正在加载版本记录...",
    empty: "暂无版本记录。",
  },
};

export function ChangelogRuntime({ lang, initialReleases = [] }: ChangelogRuntimeProps) {
  const [releases, setReleases] = useState<ChangelogRelease[] | null>(initialReleases);

  useEffect(() => {
    let active = true;

    fetchChangelog(lang).then((data) => {
      if (active && data.releases.length > 0) {
        setReleases(data.releases);
      }
    });

    return () => {
      active = false;
    };
  }, [lang]);

  if (releases === null) {
    return <p className="text-landing-muted py-12">{text[lang].loading}</p>;
  }

  if (releases.length === 0) {
    return <p className="text-landing-muted py-12">{text[lang].empty}</p>;
  }

  return <ChangelogList releases={releases} lang={lang} />;
}