import React from 'react'
import { View } from '../view'

/**
 * CSS grid layout for header slots: leading (title + near), far, description, children.
 * Grid rules live on `View layout="header"`; row count follows which `[data-header-slot="…"]`
 * nodes are present (`:has()` in View.jsx). Used by ContentHeader and AppHeader.
 */
export function HeaderLayout ({
  componentName,

  title,
  near,
  far,
  description,
  children,

  inset,
  gap = 's',
  ...props
}) {
  const hasLeading = title != null || near != null

  return (
    <View
      layout="header"
      inset={inset}
      gap={gap}
      data-component={componentName}
      {...props}
    >
      {hasLeading && (
        <div data-header-slot="leading">
          {title}
          {near}
        </div>
      )}
      {far != null && <div data-header-slot="far">{far}</div>}
      {description != null && <div data-header-slot="description">{description}</div>}
      {children != null && <div data-header-slot="children">{children}</div>}
    </View>
  )
}