import { invoke } from "@tauri-apps/api/core";
import { CogIcon, XIcon } from "lucide-react";
import { useCallback } from "react";

export default function DragBar({ isMain }: { isMain?: boolean }) {
  const close = useCallback(async () => {
    if (isMain) {
      await invoke("close");
      return;
    }

    await invoke("open_config");
  }, [isMain]);

  const config = useCallback(async () => {
    await invoke("open_config");
  }, []);

  return (
    <div className="w-full grid grid-cols-[1fr_auto_auto] fixed top-0 inset-x-0 z-50 gap-px">
      <div data-tauri-drag-region />
      {isMain && (
        <button
          title="Config"
          onClick={config}
          className="bg-muted/20 hover:bg-gray-400/40 transition-colors py-1.5 px-4 shrink-0"
        >
          <CogIcon className="size-5" />
        </button>
      )}
      <button
        title="Close"
        onClick={close}
        className="bg-muted/20 hover:bg-red-800/40 transition-colors py-1.5 px-4 shrink-0"
      >
        <XIcon className="size-5" />
      </button>
    </div>
  );
}
