import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconSpeakerphone} from '@tabler/icons-react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export function KeyUpdateLabel() {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  return (
    <View style={styles.container}>
      <View
        style={[
          styles.iconContainer,
          {height: iconSizes.x6, width: iconSizes.x6},
        ]}>
        <IconSpeakerphone
          size={iconSizes.x4}
          color={theme.graphics.purple[600]}
        />
      </View>
      <Typography
        variant="xs"
        color={theme.graphics.purple[600]}
        numberOfLines={1}
        adjustsFontSizeToFit>
        {t('key_updates.label')}
      </Typography>
    </View>
  );
}
