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

function renderTitle ({
  title,
  titleParams,
  titleAs = 'h1',
  titleVariant = 'heading-default',
}) {
  if (title == null) return null
  if (typeof title === 'string') {
    return (
      <Text
        as={titleAs}
        variant={titleVariant}
        text={title}
        params={titleParams}
      />
    )
  }
  return title
}

function renderDescription ({
  description,
  descriptionParams,
  descriptionVariant = 'default',
  descriptionMaxWidth = 'xs',
  lead,
}) {
  if (lead != null) return lead
  if (description == null) return null
  return (
    <Text
      variant={descriptionVariant}
      text={description}
      params={descriptionParams}
      maxWidth={descriptionMaxWidth}
    />
  )
}

/**
 * Standard in-app page intro: title (+ optional near slot) on the left,
 * far slot on the right, description below.
 */
export const ContentHeader = ({
  title,
  titleParams,
  titleAs = 'h1',
  titleVariant = 'heading-default',

  description,
  descriptionParams,
  descriptionVariant = 'default',
  descriptionMaxWidth = 'xs',
  lead,

  near,
  far,
  children,

  inset = 'list-row',
  gap = 's',
  ...props
}) => (
  <HeaderLayout
    componentName="content-header"
    inset={inset}
    gap={gap}
    title={renderTitle({ title, titleParams, titleAs, titleVariant })}
    near={near}
    far={far}
    description={renderDescription({
      description,
      descriptionParams,
      descriptionVariant,
      descriptionMaxWidth,
      lead,
    })}
    {...props}
  >
    {children}
  </HeaderLayout>
)