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

type TaggedFrameProps = {
  tag: string
  tagColor?: keyof Theme
  borderColor?: keyof Theme
  topMeta?: string
  bottomMeta?: string
  bottomMetaColor?: keyof Theme
  children: React.ReactNode
}

export function TaggedFrame({
  tag,
  tagColor = 'forgeCopper',
  borderColor = 'forgeBronze',
  topMeta,
  bottomMeta,
  bottomMetaColor = 'forgeVerdigris',
  children,
}: TaggedFrameProps): React.ReactNode {
  return (
    <Box flexDirection="column">
      {/* Top row: ┌───┤ TAG ├──── topMeta ─────────┐ */}
      <Box>
        <Text color={borderColor}>{'\u250C\u2500\u2500\u2500\u2524 '}</Text>
        <Text color={tagColor} bold>{tag}</Text>
        <Text color={borderColor}>{' \u251C\u2500\u2500\u2500\u2500'}</Text>
        {topMeta && (
          <>
            <Text color={borderColor}>{' '}</Text>
            <Text color={borderColor}>{topMeta}</Text>
            <Text color={borderColor}>{' '}</Text>
          </>
        )}
        <Text color={borderColor}>{'\u2510'}</Text>
      </Box>

      {/* Body: │ children │ */}
      <Box borderStyle="forgeFrame" borderColor={borderColor} borderTop={false}>
        {children}
      </Box>

      {/* Bottom row: └──────────────── bottomMeta ──┘ */}
      {bottomMeta && (
        <Box>
          <Text color={borderColor}>{'\u2514'}</Text>
          <Text color={borderColor}>{'\u2500'.repeat(4)}</Text>
          <Text color={borderColor}>{' '}</Text>
          <Text color={bottomMetaColor}>{bottomMeta}</Text>
          <Text color={borderColor}>{' '}</Text>
          <Text color={borderColor}>{'\u2500'.repeat(4)}</Text>
          <Text color={borderColor}>{'\u2518'}</Text>
        </Box>
      )}
    </Box>
  )
}
