import {View} from 'react-native';
import React from 'react';
import {Typography} from '@components/_core/Typography';
import {COLORS} from '@shared/colors';
import {useGetAttachmentsLimit} from '@hooks/useGetAttachmentsLimit';
import {getCurrentSizeString} from '@shared/utils';

import {useNewPost} from '../../hooks/useNewPost';

export function Size() {
  const {currentSize} = useNewPost();
  const {maxAttachmentsSize, maxSizeString} = useGetAttachmentsLimit();

  return (
    <View>
      <Typography
        variant="xs"
        color={
          currentSize === maxAttachmentsSize
            ? COLORS.RED
            : COLORS.GRAY_SEVENTEEN
        }>
        {getCurrentSizeString(maxSizeString, currentSize)}
      </Typography>
    </View>
  );
}
