import Hyprland from "gi://AstalHyprland"
import { bind, } from "astal"

export default function Workspaces() {
  const hypr = Hyprland.get_default()

  return <box cssClasses={["Workspaces"]}>
    {bind(hypr, "workspaces").as((workspaces) =>
      workspaces
        .filter(ws => !(ws.id >= -99 && ws.id < -2))
        .sort((a, b) => a.id - b.id)
        .map((ws) => (
          <button
            onClicked={() => ws.focus()}
            cssClasses={bind(hypr, "focusedWorkspace").as((active) =>
              ws === active ? ["focused"] : [],
            )}
          >
            {ws.id}
          </button>
        )),
    )}
  </box >
}