import { __ } from '@wordpress/i18n';
import { getConnectionStatus } from '../utils';

type ConnectionStatusProps = {
	connected: boolean;
	settings: LianaAPISettings | string;
};

export default function ConnectionStatus( props: ConnectionStatusProps ) {
	// Render the connection status
	const { connected, settings } = props;
	const status = getConnectionStatus( {
		connected,
		settings,
	} );
	const cn = [ 'gs-connection-status' ];
	let text = __( 'Not configured', 'liana-with-growthstack' );

	switch ( status ) {
		case 'ok':
			cn.push( 'is-ok' );
			text = __( 'Connected', 'liana-with-growthstack' );
			break;
		case 'empty':
			cn.push( 'is-empty' );
			break;
		case 'error':
			cn.push( 'is-error' );
			text = __( 'Error', 'liana-with-growthstack' );
			break;
	}

	return (
		<div className={ cn.join( ' ' ) }>
			<span className="gs-connection-status__indicator"></span>
			<span className="gs-connection-status__text">{ text }</span>
		</div>
	);
}