"use client";

import Link from "next/link";
import { Sidebar } from "@unlocalhosted/metalui";
import { PlayIcon } from "@/components/icons";

export type WorkflowLink = { path: string; name: string };

/** The workflows to filter runs by, on MetalUI's sidebar section; "All workflows" first. */
export function WorkflowNav({ base, workflows, current }: { base: string; workflows: WorkflowLink[]; current: string | null }) {
  return (
    <Sidebar aria-label="Workflows" className="!h-auto !w-auto !p-0">
      <Sidebar.Section title="Workflows">
        <Sidebar.Item icon={<PlayIcon />} active={current === null} render={<Link href={`${base}/actions`} />}>
          All workflows
        </Sidebar.Item>
        {workflows.map((w) => (
          <Sidebar.Item
            key={w.path}
            icon={<PlayIcon />}
            active={current === w.path}
            render={<Link href={`${base}/actions?workflow=${encodeURIComponent(w.path)}`} />}
          >
            {w.name}
          </Sidebar.Item>
        ))}
      </Sidebar.Section>
    </Sidebar>
  );
}