// Badge componenet
// The body is passed as a children prop
// The badge is passed as a badge prop
// The badge is displayed in the top right corner of the body
// The badge is displayed as a red circle with white text

import React from 'react'
import { View, Text, StyleSheet } from 'react-native'

import { colors, spacing } from '../theme'

const Badge = ({ children, badge }) => {
  return (
    <View style={styles.container}>
      {children}
      <View style={styles.badgeContainer}>
        <Text style={styles.badge}>{badge}</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  badgeContainer: {},
  badge: {
    position: 'absolute',
    top: 0,
    left: 8,
    backgroundColor: colors.error,
    borderRadius: 100,
    padding: spacing.s_1,
    color: colors.white,
  },
})

export default Badge