import type { ReactNode } from 'react'
import { styled, Text, XStack } from 'tamagui'

// SectionHeader / SectionHeaderText — the standard "uppercase tertiary label
// above a group of rows" pattern. Paired with `Card` / `LinkRow` below. Kept
// as a compound so consumers that need to add a trailing action (e.g. "Edit")
// can reach for the styled bits directly.

export const SectionHeaderText = styled(Text, {
  name: 'SectionHeaderText',
  fontSize: '$sectionHeader',
  color: '$colorTertiary',
  textTransform: 'uppercase',
})

export const SectionHeaderRow = styled(XStack, {
  name: 'SectionHeaderRow',
  pt: '$4',
  pb: '$2',
  px: '$4',
  variants: {
    spacing: {
      tight: { pt: '$3', pb: '$1' },
      loose: { pt: '$5', pb: '$2' },
    },
  } as const,
})

export function SectionHeader({
  children,
  spacing,
}: {
  children: ReactNode
  spacing?: 'tight' | 'loose'
}) {
  return (
    <SectionHeaderRow spacing={spacing}>
      <SectionHeaderText>{children}</SectionHeaderText>
    </SectionHeaderRow>
  )
}
