import { useCallback } from "react"

export const VaultPicker: React.FC<{
  setHandle(handle: FileSystemDirectoryHandle): void
}> = ({ setHandle }) => {
  const onClick = useCallback(async () => {
    try {
      const handle = await showDirectoryPicker()
      setHandle(handle)
    } catch (e) {
      if ((e as Error).name === "AbortError") {
        return
      }
      alert(e)
    }
  }, [setHandle])

  return <button onClick={onClick}>Pick a vault here.</button>
}