import { Motion } from '@legendapp/motion'

import { Fonts, Palette, Style } from '../styles'

const Badge = ({ count = 0, size = 20, customContent = null, backgroundColor = null } = {}) => {
  if (!count && !customContent) {
    return null
  }

  return (
    <Motion.View
      animate={{ scale: 1 }}
      initial={{ scale: 0 }}
      transition={{ type: 'tween', duration: 0.5 }}
      style={{
        position: 'absolute',
        top: -size / 4,
        right: -size / 4,
        backgroundColor: backgroundColor || Palette.red,
        borderRadius: 500,
        ...Style.containerCenter,
        width: size,
        height: size,
      }}
    >
      {customContent ? (
        customContent()
      ) : (
        <Motion.Text
          animate={{ scale: 1 }}
          initial={{ scale: 0 }}
          transition={{ type: 'tween', duration: 0.5 }}
          style={{
            ...Fonts({ color: Palette.white }),
          }}
        >
          {count}
        </Motion.Text>
      )}
    </Motion.View>
  )
}

export default Badge