import {View, ViewStyle} from 'react-native';
import {Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  sizeStyle: ViewStyle;
  count: number;
}

export function Remaining({sizeStyle, count}: Props) {
  const {theme} = useTheme();
  return (
    <View style={[styles.imageOverlay, sizeStyle]} pointerEvents="none">
      <Typography variant="l" color={theme.text.neutral.inverted}>
        {`+${count}`}
      </Typography>
    </View>
  );
}
