import React from 'react';
import { useIntl } from 'react-intl';

import getTrad from '../../utils/getTrad';

import * as S from './styles';

export interface IFooterProps {
	limit?: number;
	wordCount?: number;
	characterCount?: number;
}

const Footer = ({ limit, wordCount, characterCount }: IFooterProps): JSX.Element => {
	const { formatMessage } = useIntl();

	return (
		<S.Wrapper hasRadius>
			<div>
				{formatMessage(
					{
						id: getTrad('tiptap.counter.words'),
						defaultMessage: `${wordCount} word(s)`
					},
					{ wordCount }
				)}
			</div>
			<div>
				{limit
					? formatMessage(
							{
								id: getTrad('tiptap.counter.characters'),
								defaultMessage: `${characterCount} / ${limit} characters`
							},
							{ characterCount, limit }
					  )
					: formatMessage(
							{
								id: getTrad('tiptap.counter.characters.noLimit'),
								defaultMessage: `${characterCount} characters`
							},
							{ characterCount }
					  )}
			</div>
		</S.Wrapper>
	);
};

export default Footer;