"use client"
import {
  Card,
  CardBody,
  CardHeader,
  CardIcon,
  CardTool,
} from "@/components/window/Card"
import { ToolButton } from "@/components/window/ToolButton"
import {
  AssemblyLine,
  HardDisk,
  SettingConfig,
  UploadOne,
  Videocamera,
} from "@icon-park/react"
import { cn } from "@heroui/react"
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={cn(pathname === "/preference/general" && "bg-black/5")}
        >
          <SettingConfig /> 通用
        </CardIcon>
        <CardIcon
          type="menu"
          onClick={() => router.push("/preference/path")}
          className={cn(pathname === "/preference/path" && "bg-black/5")}
        >
          <AssemblyLine /> 路径
        </CardIcon>
        <CardIcon
          type="menu"
          onClick={() => router.push("/preference/replay")}
          className={cn(pathname === "/preference/replay" && "bg-black/5")}
        >
          <Videocamera /> 录像
        </CardIcon>

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