// @ts-nocheck
import {
  CHANGELOG_SECTIONS,
  CHANGELOG_SPLASH_FOOTNOTE,
  CHANGELOG_SPLASH_KICKER,
  CHANGELOG_SPLASH_TITLE,
  CHANGELOG_SPLASH_VERSION,
  type ChangelogItem,
} from "../changelogData";

export function LauncherNewsPanel() {
  return (
    <div className="changelog-splash-card launcher-request-board-card">
      <div className="changelog-splash-hero">
        <div className="changelog-splash-kicker">{CHANGELOG_SPLASH_KICKER}</div>
        <div className="changelog-splash-title" id="launcher-whats-new-title">{CHANGELOG_SPLASH_TITLE}</div>
        <div className="changelog-splash-meta">Release {CHANGELOG_SPLASH_VERSION}</div>
      </div>
      <div className="changelog-splash-list">
        {CHANGELOG_SECTIONS.map((section) => (
          <section key={section.title} className="changelog-splash-section">
            <h3 className="changelog-splash-section-title">{section.title}</h3>
            <ul className="changelog-splash-bullets">
              {section.items.map((item, index) => {
                const key = `${section.title}-${index}`;
                const normalizedItem: ChangelogItem = item;
                if (typeof normalizedItem === "string") {
                  return <li key={key}>{normalizedItem}</li>;
                }
                return (
                  <li key={key}>
                    <div>{normalizedItem.text}</div>
                    {normalizedItem.note ? <div className="changelog-splash-bullet-note">{normalizedItem.note}</div> : null}
                  </li>
                );
              })}
            </ul>
          </section>
        ))}
      </div>
      <div className="changelog-splash-footer">
        <div className="changelog-splash-footnote">{CHANGELOG_SPLASH_FOOTNOTE}</div>
      </div>
    </div>
  );
}
