"use client"

import React from "react"
import { useRouter } from "next/navigation"
import { open } from "@tauri-apps/plugin-dialog"

const Home = () => {
  const router = useRouter()
  const [file, setFile] = React.useState<string | null>("")

  const openFile = async () => {
    const filePath = await open({
      multiple: true,
      directory: false,
    })

    setFile(filePath?.join("\n") || " ")
  }
  return (
    <main
      className="flex flex-col items-center justify-center w-full h-screen gap-6"
      data-tauri-drag-region
    >
      <h1 className="text-4xl font-bold tracking-wide text-zinc-800">CS 工具箱</h1>
      <button
        type="button"
        onClick={() => router.push("/home")}
        className="px-4 py-1 rounded bg-zinc-200"
      >
        进入
      </button>
      <button type="button" onClick={openFile} className="px-4 py-1 text-white bg-blue-500 rounded">
        选择文件
      </button>
      <p className="text-center bg-zinc-50">{file}</p>
    </main>
  )
}

export default Home
