import React from 'react'
import { StyleSheet } from 'react-native'
import { useTheme } from '../../hooks'
import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
import { Icon } from '../display'

export const MuteIndicator = ({ muted }: { muted: boolean }) => {
  const styles = useStyles()

  if (!muted) return null

  return (
    <Icon
      name="general.bellMuted"
      style={styles.mutedIcon}
      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
    />
  )
}

const useStyles = () => {
  const { colors } = useTheme()
  return StyleSheet.create({
    mutedIcon: {
      color: colors.iconColorDefaultDim,
      fontSize: 16,
    },
  })
}