// Top-level brand row: name + breadcrumbs on the left, sync pill + avatar on the right.
// Ported from docs/design-source/socrata/project/editor-shell.jsx (TopBar).

import type { FixtureData } from "../../lib/fixtures/aristotle";

interface TopBarProps {
  data: FixtureData;
}

export function TopBar({ data }: TopBarProps) {
  return (
    <header className="topbar">
      <div className="topbar-left">
        <div className="brand">
          <span className="brand-name">Socrata</span>
        </div>
        <div className="breadcrumbs">
          <span className="bc-sep">/</span>
          <span className="bc-item">{data.project.scope}</span>
          <span className="bc-sep">/</span>
          <span className="bc-item bc-active">{data.project.name}</span>
          <span className="bc-branch">
            <span className="bc-branch-glyph">⎇</span> {data.project.branch}
          </span>
        </div>
      </div>
      <div className="topbar-right">
        <div className="sync-pill">
          <span className="sync-dot" /> model in sync · {data.project.lastSync}
        </div>
        <div className="topbar-divider" />
        <div className="avatar">MC</div>
      </div>
    </header>
  );
}