"use client"

import { useSteamStore } from "@/store/steam"
import { useEffect, useState } from "react"
export default function Page() {
  const steam = useSteamStore()
  const [steamDir, setSteamDir] = useState(steam.state.dir)
  const [cs2Dir, setCs2Dir] = useState(steam.state.csDir)

  useEffect(() => {
    setSteamDir(steam.state.dir)
    setCs2Dir(steam.state.csDir)
  }, [steam.state.dir, steam.state.csDir])

  return (
    <div
      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">CS工具箱</h1>
      <p>准备环节</p>

      <div className="flex flex-col w-full gap-2 p-5 border rounded-lg bg-white/40">
        <p>Steam所在文件夹</p>
        <input
          className="px-2 py-1 mb-2 rounded-lg"
          value={steamDir}
          onChange={(e) => {
            setSteamDir(e.target.value)
            steam.setDir(e.target.value)
          }}
        />
        <p>CS2所在文件夹</p>
        <input
          className="px-2 py-1 mb-2 rounded-lg"
          value={cs2Dir}
          onChange={(e) => {
            setCs2Dir(e.target.value)
            steam.setCsDir(e.target.value)
          }}
        />
        <p>当前用户64位SteamID：{steam.currentUser().steamID64}</p>
      </div>
    </div>
  )
}