import type { JSX } from 'react';
import { Icon, type IconName } from '../ui/Icon';
import { problemLabel, type Problem } from './problem';

type Tone = 'bad' | 'warn' | 'moved';

const PROBLEM_LOOKS: Readonly<
	Record< Problem, { icon: IconName; tone: Tone } >
> = {
	broken: { icon: 'unlink', tone: 'bad' },
	blocked: { icon: 'lock', tone: 'warn' },
	moved: { icon: 'moved', tone: 'moved' },
};

export function StatusPill( { problem }: { problem: Problem } ): JSX.Element {
	const { icon, tone } = PROBLEM_LOOKS[ problem ];

	return (
		<span className={ `pill pill-${ tone }` }>
			<Icon name={ icon } />
			{ problemLabel( problem ) }
		</span>
	);
}

export function StatusDot( { problem }: { problem: Problem } ): JSX.Element {
	const { icon, tone } = PROBLEM_LOOKS[ problem ];

	return (
		<span className={ `dot dot-${ tone }` }>
			<Icon name={ icon } />
		</span>
	);
}