import React from 'react'
import { StyleSheet } from 'react-native'
import { Text } from '../../../components/display'
import { useTheme } from '../../../hooks'
import type { SnippetSegment } from '../../../types/resources/search_result'

interface SnippetProps {
  segments: SnippetSegment[]
}

export function Snippet({ segments }: SnippetProps) {
  const styles = useStyles()

  return (
    <>
      {segments.map((segment, index) => (
        <Text key={index} variant="tertiary" style={segment.match && styles.match}>
          {segment.text}
        </Text>
      ))}
    </>
  )
}

export function plainSnippetText(segments: SnippetSegment[]) {
  return segments.map(segment => segment.text).join('')
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    match: {
      color: colors.interaction,
    },
  })
}