import { Show } from "solid-js";
import { PeachMark } from "../components/PeachMark";
import { RuneBackground } from "../components/RuneBackground";

export interface InitialSyncViewProps {
  slow: boolean;
  onRetry(): void;
}

export function InitialSyncView(props: InitialSyncViewProps) {
  return (
    <section
      class="peach-screen peach-theme peach-initial-sync"
      aria-labelledby="initial-sync-title"
      aria-describedby="initial-sync-copy"
    >
      <RuneBackground opacity={0.07} />
      <div class="peach-initial-sync-card" role="status" aria-live="polite">
        <div class="peach-initial-sync-mark" aria-hidden="true">
          <PeachMark />
        </div>
        <p class="peach-pro-eyebrow">PAIRING COMPLETE</p>
        <h1 id="initial-sync-title">Getting your vault ready.</h1>
        <p id="initial-sync-copy">
          Peach is securely receiving your vault from your other device.
          Everything will be ready in a moment.
        </p>
        <div class="peach-initial-sync-progress" aria-hidden="true">
          <span />
        </div>
        <p class="peach-initial-sync-note">
          Keep Peach open on both devices until this finishes.
        </p>
        <Show when={props.slow}>
          <div class="peach-initial-sync-slow">
            <p>
              This is taking longer than expected. Make sure both devices are
              online, then try the sync again.
            </p>
            <button
              type="button"
              class="peach-btn peach-btn--ghost peach-btn--md"
              onClick={props.onRetry}
            >
              Retry initial sync
            </button>
          </div>
        </Show>
      </div>
    </section>
  );
}