// ToolHeader is the per tool brand banner shown at the top of a tool surface. The accent color is
// passed in by each tool module (screenMATCH teal, slateMATCH violet, missionMATCH gold), so the three
// tools read as distinct while sharing one chrome. It is presentational only.
type Props = {
  name: string
  tagline: string
  accent: string
  children?: React.ReactNode
}

export function ToolHeader({ name, tagline, accent, children }: Props) {
  return (
    <div className="flex items-center justify-between border-b border-line/60 pb-3">
      <div className="flex items-center gap-3">
        <span className="h-8 w-1.5 rounded-full" style={{ background: accent }} />
        <div className="leading-tight">
          <div className="text-base font-bold tracking-tight">{name}</div>
          <div className="text-[11px] uppercase tracking-[0.14em] text-faint">{tagline}</div>
        </div>
      </div>
      {children}
    </div>
  )
}