Relay Bento

"use client"

import * as React from "react"
import { RelayBento, RelayTile, useRelay, useRelayLoop } from "@/components/keyframery/relay-bento"

export function Features() {
  return (
    <RelayBento className="grid-cols-1 md:grid-cols-3 md:grid-rows-[220px_220px]">
      <Story />
    </RelayBento>
  )
}

// Tiles can live anywhere inside the bento. useRelay and useRelayLoop work in any of them.
function Story() {
  const relay = useRelay()
  const button = React.useRef<HTMLButtonElement>(null)
  const [step, setStep] = React.useState("ready")

  // Plays while the bento is on screen, then rests and plays again. Leaving the screen aborts the signal.
  useRelayLoop(async (signal) => {
    setStep("uploading")
    await relay.send(button, "scan", { signal }) // resolves when the light lands
    setStep("scanning")
    await relay.send("scan", ["share", "archive"], { tone: "success", signal })
    setStep("done")
  }, { rest: 1600 })

  return (
    <>
      <RelayTile id="upload" title="Drop a file" description="It starts the moment it lands." className="md:row-span-2">
        <button ref={button}>Upload</button>
      </RelayTile>
      <RelayTile id="scan" title="Scanned" description="Checked before anyone opens it." className="md:col-span-2" />
      <RelayTile id="share" title="Shared" description="A link for everyone who needs it." />
      <RelayTile id="archive" title="Kept" description="A copy goes to the archive." />
    </>
  )
}