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

export const HeadlightsMuted = (attributes: Attributes) => {
	const { textColor } = attributes;
	return (
		<span
			style={{
				display: 'block',
				padding: '16px 0 0 16px',
				marginBottom: '-1px',
				width: '100%',
				textAlign: 'left',
				backgroundColor: findBackgroundColor(attributes),
			}}
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width={54}
				height={14}
				viewBox="0 0 54 14"
			>
				<g fill="none" fillRule="evenodd" transform="translate(1 1)">
					<circle
						cx="6"
						cy="6"
						r="6"
						fill={colord(textColor as AnyColor)
							.alpha(0.2)
							.toHex()}
						stroke={colord(textColor as AnyColor)
							.alpha(0.3)
							.toHex()}
						strokeWidth=".5"
					></circle>
					<circle
						cx="26"
						cy="6"
						r="6"
						fill={colord(textColor as AnyColor)
							.alpha(0.2)
							.toHex()}
						stroke={colord(textColor as AnyColor)
							.alpha(0.3)
							.toHex()}
						strokeWidth=".5"
					></circle>
					<circle
						cx="46"
						cy="6"
						r="6"
						fill={colord(textColor as AnyColor)
							.alpha(0.2)
							.toHex()}
						stroke={colord(textColor as AnyColor)
							.alpha(0.3)
							.toHex()}
						strokeWidth=".5"
					></circle>
				</g>
			</svg>
		</span>
	);
};