"use client"
import { ReactNode } from "react";
import clsx from "clsx";
import {
  Home,
  MonitorOne,
  Movie,
  Setting,
  Terminal,
  Toolkit,
} from "@icon-park/react";
import { useRouter } from "next/navigation";

interface SideButtonProps {
  className?: string;
  children?: ReactNode;
}

const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  return (
    <button
      className={clsx(
        className,
        "p-2.5 hover:bg-black/5 rounded-lg transition"
      )}
      {...rest}
    >
      {children}
    </button>
  );
};

const Avatar = () => {
  const router = useRouter();

  return (
    <div onClick={() => router.push('/users')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
      <img src="favicon.ico" alt="avatar" draggable={false} />
    </div>
  );
};

const SideBar = () => {
  const router = useRouter();

  return (
    <div
      className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
      data-tauri-drag-region
    >
      <section className="mx-auto">
        <Avatar />
      </section>

      <section
        className="flex flex-col items-center justify-center h-full gap-5"
        data-tauri-drag-region
      >
        <SideButton onClick={() => router.push("/home")}>
          <Home size={24} />
        </SideButton>
        <SideButton onClick={() => router.push("/tool")}>
          <Toolkit size={24} />
        </SideButton>
        <SideButton onClick={() => router.push("/console")}>
          <Terminal size={24} />
        </SideButton>
        <SideButton onClick={() => router.push("/gear")}>
          <MonitorOne size={24} />
        </SideButton>
        <SideButton onClick={() => router.push("/movie")}>
          <Movie size={24} />
        </SideButton>
        <SideButton onClick={() => router.push("/preference")}>
          <Setting size={24} />
        </SideButton>
      </section>

      <div
        className="mx-auto text-sm text-center text-zinc-500"
        data-tauri-drag-region
      >
        <p>版本号</p>
        <p>0.0.1</p>
      </div>
    </div>
  );
};

export default SideBar;