/**
 * The severity chip both diagnostics views carry. The word is the affordance —
 * colour alone would leave the severity unreadable to a screen reader and to
 * anyone who does not separate the amber from the red.
 */

import * as stylex from "@stylexjs/stylex";
import type { DiagnosticSeverity } from "@/lib/types";
import { colors } from "@/ui/tokens.stylex";

const styles = stylex.create({
	badge: {
		display: "inline-block",
		borderRadius: "0.25rem",
		borderWidth: 1,
		borderStyle: "solid",
		paddingInline: "0.375rem",
		paddingBlock: "0.125rem",
		fontSize: "0.75rem",
		lineHeight: "1rem",
		fontWeight: 500,
		whiteSpace: "nowrap",
	},
	warning: {
		borderColor: colors.warnBorder,
		backgroundColor: colors.warnSurface,
		color: colors.warnText,
	},
	error: {
		borderColor: colors.dangerBorder,
		backgroundColor: colors.dangerSurface,
		color: colors.dangerText,
	},
});

export default function SeverityBadge({ severity }: { severity: DiagnosticSeverity }) {
	return (
		<span {...stylex.props(styles.badge, severity === "error" ? styles.error : styles.warning)}>
			{severity === "error" ? "Error" : "Warning"}
		</span>
	);
}