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

export const StringSmall = (attributes: Attributes) => {
	const { language, bgColor, textColor, headerString } = attributes;
	let textBorder = computeLineHighlightColor(textColor, attributes);

	if (textColor?.startsWith('var(')) {
		textBorder = findTextColor(attributes) ?? textColor;
	}
	return (
		<span
			style={{
				display: 'flex',
				alignItems: 'center',
				padding: '10px 0px 0 16px',
				fontSize: '0.8em',
				width: '100%',
				textAlign: 'left',
				backgroundColor: bgColor,
				fontStyle: 'italic',
				color: textColor,
			}}
		>
			<span
				style={{
					borderBottom: `1px solid ${textBorder}`,
				}}
			>
				{headerString || languages[language as Lang]}
			</span>
		</span>
	);
};