import { Component } from 'solid-js';

interface SyncInfoSheetProps {
  onGotIt: () => void;
  onLearnPro: () => void;
}

export const SyncInfoSheet: Component<SyncInfoSheetProps> = (props) => {
  return (
    <div class="peach-sync-info-backdrop" onClick={props.onGotIt}>
      <div
        class="peach-sync-info-sheet"
        onClick={e => e.stopPropagation()}
      >
        <div class="peach-sync-info-handle" />

        <h2 class="peach-sync-info-title">How Peach Sync works</h2>

        <div class="peach-sync-info-body">
          <p class="peach-sync-info-point">
            <span class="peach-sync-info-icon">⇄</span>
            You can transfer your vault to another device for free —
            scan a code and your passwords move over instantly.
          </p>
          <p class="peach-sync-info-point">
            <span class="peach-sync-info-icon">✦</span>
            Continuous sync across multiple devices — keeping everything
            up to date automatically — requires Peach Pro.
          </p>
        </div>

        <div class="peach-sync-info-actions">
          <button
            class="peach-btn peach-btn--accent peach-btn--full"
            onClick={props.onGotIt}
          >
            Got it
          </button>
          <button
            class="peach-sync-info-pro-link"
            onClick={props.onLearnPro}
          >
            Learn about Pro →
          </button>
        </div>
      </div>
    </div>
  );
};