import React from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '../../hooks'
import { Icon, Text } from '../display'

interface Props {
  read?: boolean
}

export function MessageReadReceipts({ read }: Props) {
  const styles = useStyles()
  if (!read) {
    return (
      <View style={styles.badgeContainer}>
        <Icon name="general.check" style={styles.icon} />
        <Text style={styles.badgeText} variant="footnote">
          Sent
        </Text>
      </View>
    )
  }

  return (
    <View style={styles.badgeContainer}>
      <Icon name="general.checkDouble" style={styles.icon} />
      <Text style={styles.badgeText} variant="footnote">
        Read
      </Text>
    </View>
  )
}

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

  return StyleSheet.create({
    badgeContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
    },
    badgeText: {
      fontWeight: '600',
    },
    icon: {
      color: colors.iconColorDefaultSecondary,
    },
  })
}