"use client"
import { Card, CardHeader, CardIcon, CardTool, CardBody } from "@/components/window/Card"
import { ToolButton } from "@/components/window/ToolButton"
import { SettingConfig, UploadOne, HardDisk, AssemblyLine, Videocamera } from "@icon-park/react"
import clsx from "clsx"
import { usePathname, useRouter } from "next/navigation"
// import { platform } from "@tauri-apps/plugin-os"

export default function PreferenceLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()
  const pathname = usePathname()

  return (
    <Card className="max-w-full overflow-y-scroll">
      <CardHeader>
        <CardIcon
          type="menu"
          onClick={() => router.push("/preference/general")}
          className={clsx(pathname === "/preference/general" && "bg-white/60")}
        >
          <SettingConfig /> 通用
        </CardIcon>
        <CardIcon
          type="menu"
          onClick={() => router.push("/preference/path")}
          className={clsx(pathname === "/preference/path" && "bg-white/60")}
        >
          <AssemblyLine /> 路径
        </CardIcon>
        <CardIcon
          type="menu"
          onClick={() => router.push("/preference/replay")}
          className={clsx(pathname === "/preference/replay" && "bg-white/60")}
        >
          <Videocamera /> 录像
        </CardIcon>

        <CardTool>
          <ToolButton>
            <UploadOne />
            云同步
          </ToolButton>
          <ToolButton>
            <HardDisk />
            保存
          </ToolButton>
        </CardTool>
      </CardHeader>
      <CardBody>{children}</CardBody>
    </Card>
  )
}
