stack/packages/ui/src/components/SectionHeader.tsx

import type { ReactElement, ReactNode } from "react";

export interface SectionHeaderProps {
  title: string;
  subtitle?: string;
  actions?: ReactNode;
  className?: string;
}

export function SectionHeader({
  title,
  subtitle,
  actions,
  className = "",
}: SectionHeaderProps): ReactElement {
  return (
    <div
      className={className}
      style={{
        display: "flex",
        alignItems: "center",
        gap: 12,
        marginBottom: 16,
      }}
    >
      <div>
        <div
          style={{
            fontSize: "0.95rem",
            fontWeight: 700,
            color: "var(--text)",
          }}
        >
          {title}
        </div>
        {subtitle !== undefined && (
          <div
            style={{
              fontSize: "0.78rem",
              color: "var(--muted)",
              marginTop: 2,
            }}
          >
            {subtitle}
          </div>
        )}
      </div>
      {actions !== undefined && (
        <div
          style={{
            marginLeft: "auto",
            display: "flex",
            gap: 8,
            alignItems: "center",
          }}
        >
          {actions}
        </div>
      )}
    </div>
  );
}