/**
 * Status badge: the word is always present — colour alone never carries
 * the state. The glyph is a third, redundant cue, so a colour-blind reader
 * and a screen-reader user both still get the state from the text.
 *
 * `status` picks the colour, the glyph and the default wording. Pass `label`
 * when the state is not a feed/log status and the default word would read
 * wrong — an SSL row wants "On", not "Active". Pass `icon` to override the
 * glyph the status would otherwise pick.
 */
import { __ } from '@wordpress/i18n';

const LABELS = {
	queued: () => __( 'Queued', 'rewind-form-bridge-for-brevo' ),
	success: () => __( 'Success', 'rewind-form-bridge-for-brevo' ),
	failed: () => __( 'Failed', 'rewind-form-bridge-for-brevo' ),
	retrying: () => __( 'Retrying', 'rewind-form-bridge-for-brevo' ),
	skipped: () => __( 'Skipped', 'rewind-form-bridge-for-brevo' ),
	pending_doi: () => __( 'Pending opt-in', 'rewind-form-bridge-for-brevo' ),
	active: () => __( 'Active', 'rewind-form-bridge-for-brevo' ),
	paused: () => __( 'Paused', 'rewind-form-bridge-for-brevo' ),
};

const ICONS = {
	queued: 'schedule',
	success: 'check_circle',
	failed: 'error',
	retrying: 'cached',
	skipped: 'block',
	pending_doi: 'mark_email_read',
	active: 'check_circle',
	paused: 'pause_circle',
};

export default function StatusBadge( { status, label, icon } ) {
	const text = label || ( LABELS[ status ] ? LABELS[ status ]() : status );
	const glyph = icon ?? ICONS[ status ];

	return (
		<span className={ `rbfb-badge rbfb-badge--${ status }` }>
			{ glyph && (
				<span className="rbfb-icon rbfb-badge__icon" aria-hidden="true">
					{ glyph }
				</span>
			) }
			{ text }
		</span>
	);
}
