import { For, Show } from "solid-js";
import { PeachMark } from "../components/PeachMark";
import { CURRENT_NOTES, PEACH_VERSION, markWhatsNewSeen } from "../../shared/release-notes";

export function WhatsNewView(props: { onContinue: () => void }) {
  async function continueClicked() {
    await markWhatsNewSeen();
    props.onContinue();
  }

  return (
    <div class="peach-whats-new peach-theme">
      <div class="peach-whats-new-inner">
        <div class="peach-whats-new-header">
          <PeachMark class="peach-whats-new-mark" />
          <h1 class="peach-whats-new-title">what's new</h1>
          <span class="peach-whats-new-version">v{PEACH_VERSION}</span>
        </div>

        <div class="peach-whats-new-scroll">
          <For each={CURRENT_NOTES}>
            {(note) => (
              <div classList={{ "peach-whats-new-note": true, "is-breaking": !!note.breaking }}>
                <Show when={note.breaking}>
                  <span class="peach-whats-new-badge">breaking</span>
                </Show>
                <h2 class="peach-whats-new-note-heading">{note.heading}</h2>
                <p class="peach-whats-new-note-body">{note.body}</p>
              </div>
            )}
          </For>
        </div>

        <button class="peach-btn peach-btn--accent peach-whats-new-continue" onClick={continueClicked}>
          Continue
        </button>
      </div>
    </div>
  );
}