// frontend/components/SubRail.tsx
"use client";
import { Icon } from "./Icon";
import type { IconName } from "./icons/paths";

export type RailItem =
  | { sep: true }
  | { sep?: false; id: string; icon: IconName; label: string; dot?: boolean };

export function SubRail({
  items,
  active,
  onPick,
}: {
  items: RailItem[];
  active: string;
  onPick: (id: string) => void;
}) {
  return (
    <aside className="rail">
      {items.map((r, i) =>
        "sep" in r && r.sep ? (
          <span className="sp" key={`s${i}`} />
        ) : (
          <button
            key={r.id}
            className={active === r.id ? "active" : ""}
            onClick={() => onPick(r.id)}
            aria-label={r.label}
            aria-current={active === r.id ? "page" : undefined}
          >
            <Icon name={r.icon} />
            {r.dot && <span className="rdot" />}
            <span className="tip">{r.label}</span>
          </button>
        ),
      )}
    </aside>
  );
}