import React from "react";

const HelperAttributes = {
	closed: {
		width: 144,
		height: 122,
		transform: "translate(-1433.468 -429.908)",
		transform2: "translate(1436.468 432.908)",
		cx: 146.5,
		cy: 146.5,
		c: 146.5,
	},
	open: {
		width: 645,
		height: 514,
		transform: "translate(-1275.001 -435)",
		transform2: "translate(1275.001 435)",
		cx: 395,
		cy: 395,
		c: 315,
	},
};

type HelperBgndProps = {
	state: "open" | "closed";
};

const HelperBgnd = ({ state }: HelperBgndProps) => {
	const { width, height, transform, transform2, cx, cy, c } =
		HelperAttributes[state];

	return (
		<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height}>
			<defs>
				<clipPath id="clipPath">
					<rect
						id="Rectangle_128"
						data-name="Rectangle 128"
						width="144"
						height="122"
						transform="translate(1433.468 429.908)"
						fill="#fff"
						stroke="#707070"
						strokeWidth="1"
					/>
				</clipPath>
			</defs>
			<g
				id="Mask_Group_22"
				data-name="Mask Groups 22"
				transform={transform}
			>
				<circle
					id="Ellipse_37"
					data-name="Ellipse 37"
					cx={cx}
					cy={cy}
					r={c}
					transform={transform2}
					fill="#1a73e8"
				/>
			</g>
		</svg>
	);
};

export default HelperBgnd;