import type { TokenType } from '../../types'
import React from 'react'
import { Text, View } from 'react-native'

interface SyntaxLineProps {
  line: TokenType[]
  fontSize?: number
}

function SyntaxLine({ line, fontSize }: SyntaxLineProps) {
  return (
    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      {line.map((token, tokenIndex) => {
        // Preserve whitespace
        const content = token.content.replace(/ /g, '\u00A0')
        return (
          <Text
            key={`${content}-${tokenIndex}`}
            style={{
              color: token.color,
              fontFamily: 'monospace',
              fontSize,
              fontStyle: token.fontStyle as 'normal' | 'italic',
            }}
          >
            {content}
          </Text>
        )
      })}
    </View>
  )
}

export default SyntaxLine
