"use client"
 
import * as React from "react"
 
import { useFocusTrap } from "@/hooks/use-focus-trap"
 
export function Component() {
  const [isModalOpen, setIsModalOpen] = React.useState(false)
  const modalRef = useFocusTrap<HTMLDivElement>(
    isModalOpen,
    'input[name="name"]'
  )
 
  const openModal = () => setIsModalOpen(true)
  const closeModal = () => setIsModalOpen(false)
 
  return (
    <div>
      <button onClick={openModal}>Open Modal</button>
 
      {isModalOpen && (
        <div
          ref={modalRef}
          className="fixed inset-0 flex items-center justify-center bg-black/50"
        >
          <div className="rounded bg-white p-4">
            <h2>Modal Title</h2>
            <input name="name" placeholder="Enter your name" />
            <button onClick={closeModal}>Close Modal</button>
          </div>
        </div>
      )}
    </div>
  )
}