export type TopBarAction = {
  id: string;
  label: string;
  onClick: () => void;
  disabled?: boolean;
};

export type TopBarStatusTone = "idle" | "busy" | "success" | "error";

type TopBarProps = {
  title: string;
  actions: TopBarAction[];
  statusMessage: string;
  statusTone: TopBarStatusTone;
  apiVersion: string;
};

export function TopBar({ title, actions, statusMessage, statusTone, apiVersion }: TopBarProps) {
  return (
    <header className="topbar" role="banner">
      <div className="topbar__brand">Schemeta</div>
      <div className="topbar__title">{title}</div>
      <div className="topbar__actions" role="toolbar" aria-label="Workflow actions">
        {actions.map((action) => (
          <button key={action.id} type="button" onClick={action.onClick} disabled={action.disabled === true}>
            {action.label}
          </button>
        ))}
      </div>
      <div className="topbar__meta">
        <span>Status: {statusMessage}</span>
        <span>Level: {statusTone}</span>
        <span>API: {apiVersion}</span>
      </div>
    </header>
  );
}
