import { __ } from '@wordpress/i18n';
import PropTypes from 'prop-types';

/**
 * Small right-aligned count indicator shown under abstract title/text fields.
 *
 * Displays both word and character counts. The limit (`max`) is attached to
 * whichever unit the active `mode` measures, and the label turns red when the
 * active count exceeds the limit.
 *
 * @param {Object} props
 * @param {number} props.words - Current word count.
 * @param {number} props.characters - Current character count.
 * @param {number|null} props.max - Limit in the active unit (null = no limit).
 * @param {string} props.mode - 'character' (default) or 'word'.
 */
const CountLabel = ({ words = 0, characters = 0, max = null, mode = 'character' }) => {
	const isWordMode = mode === 'word';
	const activeCount = isWordMode ? words : characters;
	const isOver = max != null && activeCount > max;

	return (
		<div
			style={{
				textAlign: 'right',
				marginTop: 4,
				fontSize: '12px',
				color: isOver ? '#ff4d4f' : '#666',
			}}
		>
			{isWordMode ? (
				<>
					{words}
					{max != null ? ` / ${max}` : ''} {__('words', 'simplyconf')} •{' '}
					{characters} {__('characters', 'simplyconf')}
				</>
			) : (
				<>
					{words} {__('words', 'simplyconf')} • {characters}
					{max != null ? ` / ${max}` : ''} {__('characters', 'simplyconf')}
				</>
			)}
		</div>
	);
};

CountLabel.propTypes = {
	words: PropTypes.number,
	characters: PropTypes.number,
	max: PropTypes.number,
	mode: PropTypes.oneOf(['character', 'word']),
};

export default CountLabel;
