import React from 'react'
import { Text } from '../text'
import { Slot } from '../component-slots'
import { HeaderLayout } from '../header-layout/HeaderLayout.jsx'

/**
 * App shell top chrome header — same API as ContentHeader, for use in the
 * global header bar rather than in-page content intros.
 */
export const AppHeader = ({
  title,
  near,
  far,
  children,

  inset = 'm',
  gap = 's',
  ...props
}) => {


 let Title = title

  if (typeof title === 'string') {
    Title = (
      <Text
        as="h1"
        variant='heading-tertiary'
        text={title}
      />
    )
  }

  return  (
    <HeaderLayout
      componentName="app-header"
      inset={inset}
      gap={gap}
      title={Title}
      near={near}
      far={far}
      {...props}
    >
      {children}
    </HeaderLayout>
  )
}