"use client"

import { steamStore, setDir, setCsDir, currentUser } from "@/store/steam"
import { useEffect } from "react"
import { useSnapshot } from "valtio"
export default function Page() {
  useEffect(() => {
    ;async () => {
      steamStore.start()
    }
  }, [])
  const steam = useSnapshot(steamStore.state)
  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 text-zinc-800">
        CS工具箱
      </h1>
      <p>准备环节</p>

      <div className="flex flex-col w-full gap-6 p-5 border rounded-lg bg-white/40">
        <input
          className="px-2 py-1 rounded-lg"
          value={steam.dir}
          onChange={(e) => setDir(e.target.value)}
        />
        <input
          className="px-2 py-1 rounded-lg"
          value={steam.csDir}
          onChange={(e) => setCsDir(e.target.value)}
        />

        <p>{currentUser().steamID64}</p>
      </div>
    </div>
  )
}