/**
 * PWA install prompt shown when the browser supports app installation.
 * Adapted from epic/9-3-pwa-support.
 */

import '../styles/install-prompt.css'

interface BeforeInstallPromptEvent extends Event {
  prompt(): Promise<void>
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
}

interface InstallPromptProps {
  promptEvent: BeforeInstallPromptEvent | null
  isInstalled: boolean
  onInstall: () => Promise<void>
  onDismiss: () => void
}

export function InstallPrompt({
  promptEvent,
  isInstalled,
  onInstall,
  onDismiss,
}: InstallPromptProps) {
  if (isInstalled || !promptEvent) return null

  return (
    <div className="install-prompt" role="complementary" aria-label="Install CalcPad">
      <div className="install-content">
        <p className="install-text">
          Install CalcPad for offline access and a native app experience.
        </p>
        <div className="install-actions">
          <button className="install-btn" onClick={onInstall}>
            Install
          </button>
          <button className="install-dismiss" onClick={onDismiss}>
            Not now
          </button>
        </div>
      </div>
    </div>
  )
}
