import React from 'react'
import { Box, Text } from '../../ink.js'
import { useTerminalSize } from '../../hooks/useTerminalSize.js'
import type { Theme } from '../../utils/theme.js'

type StampedRuleProps = {
  tag: string
  tagColor?: keyof Theme
  ruleColor?: keyof Theme
  meta?: string
  metaColor?: keyof Theme
  ruleChar?: string
  padStart?: number
}

/**
 * Minimal label row: bold left-aligned TAG, optional right-aligned meta,
 * thin under-rule for section separation. No decorative brackets.
 *
 * Renders two lines:
 *   TAG                                                          meta
 *   ────────────────────────────────────────────────────────────────
 */
export function StampedRule({
  tag,
  tagColor = 'forgeCopper',
  ruleColor = 'forgeSlag',
  meta,
  metaColor = 'forgeSandBeige',
  ruleChar = '\u2500',
}: StampedRuleProps): React.ReactNode {
  const { columns } = useTerminalSize()
  const underline = ruleChar.repeat(Math.max(0, columns))

  return (
    <Box flexDirection="column">
      <Box>
        <Text color={tagColor} bold>
          {tag}
        </Text>
        {meta && (
          <>
            <Box flexGrow={1} />
            <Text color={metaColor}>{meta}</Text>
          </>
        )}
      </Box>
      <Text color={ruleColor} dimColor>
        {underline}
      </Text>
    </Box>
  )
}
