"use client"
 
import * as React from "react"
 
import { useKeyPress } from "@/hooks/use-key-press"
 
export function Component() {
  const [activeKey, setActiveKey] = React.useState<string>("")
 
  const handleKeyPress = React.useCallback((e: KeyboardEvent) => {
    e.preventDefault()
    setActiveKey(e.key)
    setTimeout(() => setActiveKey(""), 600)
  }, [])
 
  useKeyPress({
    keyPressItems: [
      {
        keys: ["UpArrow"],
        event: handleKeyPress,
      },
      {
        keys: ["DownArrow"],
        event: handleKeyPress,
      },
      {
        keys: ["LeftArrow"],
        event: handleKeyPress,
      },
      {
        keys: ["RightArrow"],
        event: handleKeyPress,
      },
    ],
  })
 
  return (
    <section>
      <p>Press any arrow key on your keyboard</p>
      <div className="button-grid">
        <button className={activeKey === "ArrowUp" ? "active" : ""}>↑</button>
        <button className={activeKey === "ArrowLeft" ? "active" : ""}>←</button>
        <button className={activeKey === "ArrowDown" ? "active" : ""}>↓</button>
        <button className={activeKey === "ArrowRight" ? "active" : ""}>
          →
        </button>
      </div>
      {activeKey && <p>{activeKey} pressed!</p>}
    </section>
  )
}