import React, { useState } from "react"

export default function Unsupported() {
  const [showWhy, setShowWhy] = useState(false)

  return (
    <div>
      <h1>{"Sorry :("}</h1>
      <br />
      <div>Your device doesn't support Tack Up Now!</div>

      {showWhy ? (
        <div>
          iOS 16.3 and under does not support notification delivery through web
          apps, so Tack Up Now can't send notifications to your device.
        </div>
      ) : (
        <button onClick={() => setShowWhy(true)}>Why not?</button>
      )}
    </div>
  )
}