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

export const Headlights = (attributes: Attributes) => (
	<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="#FF5F56"
					stroke="#E0443E"
					strokeWidth=".5"
				></circle>
				<circle
					cx="26"
					cy="6"
					r="6"
					fill="#FFBD2E"
					stroke="#DEA123"
					strokeWidth=".5"
				></circle>
				<circle
					cx="46"
					cy="6"
					r="6"
					fill="#27C93F"
					stroke="#1AAB29"
					strokeWidth=".5"
				></circle>
			</g>
		</svg>
	</span>
);