import React from 'react';
import { useAccountComment } from '@plebbit/plebbit-react-hooks';
import useStateString from '../hooks/useStateString';

const StateLabel = ({ commentIndex, className }) => {
	const comment = useAccountComment({ commentIndex: commentIndex });
	const stateString = useStateString(comment);

	if (comment.updatedAt !== undefined || comment.index === undefined) {
		return null;
	}

	if (comment.state === 'failed' || comment.state === 'succeeded') {
		return null;
	}

	if (!stateString) {
		return null;
	}

	return (
		<span className='ttl'>
			<br />(<span className={className}>{stateString}</span>)
		</span>
	);
};

export default StateLabel;
