import { colord, AnyColor } from 'colord';
import { Attributes } from '../../../types';

export const HeadlightsMuted = ({
    textColor,
    bgColor,
}: Partial<Attributes>) => (
    <span
        style={{
            display: 'block',
            padding: '16px 0 0 16px',
            marginBottom: '-1px',
            width: '100%',
            textAlign: 'left',
            backgroundColor: bgColor,
        }}>
        <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>
);