import type { CSSProperties, ReactNode } from 'react';
import type { BadgeTone } from '../status';
import { launchStatusView } from '../status';

interface StatusBadgeProps {
	tone: BadgeTone;
	children: ReactNode;
	className?: string;
	style?: CSSProperties;
}

/**
 * The smallest, most-repeated component. Renders the locked `badge {tone}`
 * markup with its status dot. Tone maps directly to the design-system status
 * colors (scheduled/running/success/failed/canceled).
 * @param root0
 * @param root0.tone
 * @param root0.children
 * @param root0.className
 * @param root0.style
 */
export const StatusBadge = ( {
	tone,
	children,
	className = '',
	style,
}: StatusBadgeProps ) => (
	<span
		className={ [ 'badge', tone, className ].filter( Boolean ).join( ' ' ) }
		style={ style }
	>
		<span className="dot"></span>
		{ children }
	</span>
);

/**
 * Data-driven badge: derives tone and label from a raw plugin status value
 * through the shared status mapper.
 * @param root0
 * @param root0.value
 */
export const LaunchStatusBadge = ( { value }: { value: unknown } ) => {
	const view = launchStatusView( value );

	return <StatusBadge tone={ view.badgeTone }>{ view.label }</StatusBadge>;
};
