// Header above each canvas (Narrative / Model). Title + subtitle on the left, optional actions on the right.
// Ported from docs/design-source/socrata/project/editor-shell.jsx (CanvasHeader).

import type { ReactNode } from "react";

interface CanvasHeaderProps {
  title: string;
  subtitle: string;
  right?: ReactNode;
}

export function CanvasHeader({ title, subtitle, right }: CanvasHeaderProps) {
  return (
    <div className="canvas-header">
      <div>
        <div className="canvas-title">{title}</div>
        <div className="canvas-sub">{subtitle}</div>
      </div>
      <div className="canvas-header-right">{right}</div>
    </div>
  );
}