import { type AnyColor, colord } from 'colord';
import type { Attributes, Lang } from '../../../types';
import { findBackgroundColor, findTextColor } from '../../../util/colors';
import { languages } from '../../../util/languages';

export const PillString = (attributes: Attributes) => {
	const { language, bgColor, textColor, headerString } = attributes;
	const bgC = colord(bgColor as AnyColor);
	let bg = bgC.toHex();
	const textC = colord(textColor as AnyColor);
	let text = textC.isDark()
		? textC.lighten(0.05).toHex()
		: textC.darken(0.05).toHex();

	if (bgColor?.startsWith('var(')) {
		bg = findBackgroundColor(attributes) ?? bgColor;
	}
	if (textColor?.startsWith('var(')) {
		text = findTextColor(attributes) ?? textColor;
	}

	return (
		<span
			style={{
				display: 'flex',
				alignItems: 'center',
				padding: '16px 0 0 16px',
				width: '100%',
				textAlign: 'left',
				backgroundColor: bg,
			}}
		>
			<span
				style={{
					background: text,
					padding: '0.3rem 0.5rem 0.2rem',
					borderRadius: '1rem',
					fontSize: '0.8em',
					lineHeight: 1,
					height: '1.25rem',
					textAlign: 'center',
					display: 'inline-flex',
					alignItems: 'center',
					justifyContent: 'center',
					color: bg,
				}}
			>
				{headerString || languages[language as Lang]}
			</span>
		</span>
	);
};