const CardDesignOneIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path
			d="M70.84 78.606v.77H6.16v-.77zm.77-.771V6.165a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v71.67c0 .426.345.77.77.77v.771l-.157-.008a1.54 1.54 0 0 1-1.383-1.533V6.165c0-.85.69-1.541 1.54-1.541h64.68c.85 0 1.54.69 1.54 1.541v71.67l-.008.157a1.54 1.54 0 0 1-1.375 1.376l-.157.008v-.77a.77.77 0 0 0 .77-.771"
			fill="#9ea9b2"
		/>
		<ellipse cx={38.5} cy={16.183} rx={6.93} ry={6.936} fill="#718491" />
		<rect x={15.4} y={29.284} width={46.2} height={3.853} rx={1.927} fill="#718491" />
		<path
			d="M9.24 40.459c0-.639.517-1.156 1.155-1.156h56.21a1.156 1.156 0 0 1 0 2.312h-56.21a1.156 1.156 0 0 1-1.155-1.156m1.54 5.394c0-.638.517-1.156 1.155-1.156h53.13a1.156 1.156 0 0 1 0 2.312h-53.13a1.156 1.156 0 0 1-1.155-1.156m5.39 5.395c0-.639.517-1.156 1.155-1.156h42.35a1.156 1.156 0 0 1 0 2.312h-42.35a1.156 1.156 0 0 1-1.155-1.156m6.93 17.724c0-.638.517-1.156 1.155-1.156h28.49a1.155 1.155 0 0 1 0 2.312h-28.49a1.155 1.155 0 0 1-1.155-1.156m4.62 5.01a.77.77 0 0 1 .77-.771h20.02a.77.77 0 0 1 0 1.541H28.49a.77.77 0 0 1-.77-.77"
			fill="#8796a1"
		/>
		<path
			d="m27.099 58.39.81 1.565 1.753.275-1.255 1.24.279 1.729-1.587-.792-1.578.792.27-1.73-1.255-1.239 1.761-.275zm5.511.086.811 1.566 1.752.276-1.255 1.238.28 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.276zm5.51 0 .811 1.566 1.752.276-1.255 1.238.279 1.73-1.587-.792-1.577.792.27-1.73-1.255-1.238 1.76-.276zm5.51 0 .812 1.566 1.752.276-1.256 1.238.28 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.276zm5.512.087.81 1.566 1.753.275-1.255 1.24.279 1.728-1.587-.791-1.578.791.27-1.729-1.255-1.239 1.761-.275z"
			fill="#718491"
		/>
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

const CardDesignTwoIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path
			d="M70.84 78.605v.771H6.16v-.77zm.77-.77V16.183a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v61.652c0 .425.345.77.77.77v.771l-.157-.008a1.54 1.54 0 0 1-1.375-1.376l-.008-.157V16.183c0-.85.69-1.54 1.54-1.54h64.68c.85 0 1.54.69 1.54 1.54v61.652l-.008.157a1.54 1.54 0 0 1-1.375 1.376l-.157.008v-.77a.77.77 0 0 0 .77-.771"
			fill="#9ea9b2"
		/>
		<ellipse cx={38.885} cy={15.028} rx={7.315} ry={7.321} fill="#718491" />
		<rect x={15.4} y={29.284} width={46.2} height={3.853} rx={1.927} fill="#718491" />
		<path
			d="M9.24 40.459c0-.639.517-1.156 1.155-1.156h56.21a1.156 1.156 0 0 1 0 2.312h-56.21a1.156 1.156 0 0 1-1.155-1.156m1.54 5.394c0-.638.517-1.156 1.155-1.156h53.13a1.156 1.156 0 0 1 0 2.312h-53.13a1.156 1.156 0 0 1-1.155-1.156m5.39 5.395c0-.639.517-1.156 1.155-1.156h42.35a1.156 1.156 0 0 1 0 2.312h-42.35a1.156 1.156 0 0 1-1.155-1.156m6.93 17.724c0-.638.517-1.156 1.155-1.156h28.49a1.155 1.155 0 0 1 0 2.312h-28.49a1.155 1.155 0 0 1-1.155-1.156m4.62 5.01a.77.77 0 0 1 .77-.771h20.02a.77.77 0 0 1 0 1.541H28.49a.77.77 0 0 1-.77-.77"
			fill="#8796a1"
		/>
		<path
			d="m27.099 58.39.81 1.565 1.753.275-1.255 1.24.279 1.729-1.587-.792-1.578.792.27-1.73-1.255-1.239 1.761-.275zm5.511.086.811 1.566 1.752.276-1.255 1.238.28 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.276zm5.51 0 .811 1.566 1.752.276-1.255 1.238.279 1.73-1.587-.792-1.577.792.27-1.73-1.255-1.238 1.76-.276zm5.51 0 .812 1.566 1.752.276-1.256 1.238.28 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.276zm5.512.087.81 1.566 1.753.275-1.255 1.24.279 1.728-1.587-.791-1.578.791.27-1.729-1.255-1.239 1.761-.275z"
			fill="#718491"
		/>
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

const CardDesignThreeIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path
			d="M70.84 77.835v.77H6.16v-.77zm.77-.77V6.934a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v70.13c0 .425.345.77.77.77v.77l-.157-.008a1.54 1.54 0 0 1-1.375-1.375l-.008-.158V6.936c0-.851.69-1.541 1.54-1.541h64.68c.85 0 1.54.69 1.54 1.54v70.13l-.008.157a1.54 1.54 0 0 1-1.375 1.375l-.157.009v-.771a.77.77 0 0 0 .77-.77"
			fill="#9ea9b2"
		/>
		<ellipse cx={16.17} cy={18.495} rx={6.93} ry={6.936} fill="#718491" />
		<rect x={26.18} y={13.101} width={41.58} height={3.853} rx={1.927} fill="#718491" />
		<path
			d="M26.18 34.294c0-.639.517-1.156 1.155-1.156h39.27a1.155 1.155 0 0 1 0 2.312h-39.27a1.155 1.155 0 0 1-1.155-1.156m0 5.394c0-.638.517-1.156 1.155-1.156h36.96a1.155 1.155 0 0 1 0 2.312h-36.96a1.155 1.155 0 0 1-1.155-1.156m0 5.395c0-.639.517-1.156 1.155-1.156h39.27a1.155 1.155 0 0 1 0 2.312h-39.27a1.155 1.155 0 0 1-1.155-1.156m0 5.394c0-.638.517-1.156 1.155-1.156h37.73a1.155 1.155 0 0 1 0 2.312h-37.73a1.155 1.155 0 0 1-1.155-1.156m0 4.624c0-.638.517-1.156 1.155-1.156h20.79a1.156 1.156 0 0 1 0 2.312h-20.79a1.156 1.156 0 0 1-1.155-1.156m0 10.019c0-.64.517-1.157 1.155-1.157h28.49a1.155 1.155 0 0 1 0 2.312h-28.49a1.155 1.155 0 0 1-1.155-1.156m0 5.01a.77.77 0 0 1 .77-.771h20.02a.77.77 0 0 1 0 1.541H26.95a.77.77 0 0 1-.77-.77"
			fill="#8796a1"
		/>
		<path
			d="m28.639 19.857.81 1.566 1.753.275-1.255 1.239.279 1.73-1.587-.792-1.578.791.27-1.73-1.255-1.238 1.761-.275zm5.511.087.811 1.566 1.753.275-1.256 1.24.28 1.729-1.587-.792-1.578.791.27-1.729-1.255-1.239 1.76-.275zm5.51 0 .811 1.566 1.752.275-1.255 1.24.28 1.729-1.587-.792-1.578.791.27-1.729-1.255-1.239 1.76-.275zm5.51 0 .812 1.566 1.752.275-1.256 1.24.28 1.729-1.587-.792-1.578.791.27-1.729-1.255-1.239 1.761-.275zm5.512.086.81 1.567 1.753.275-1.255 1.239.279 1.73-1.587-.792-1.578.791.27-1.73-1.255-1.238 1.761-.275z"
			fill="#718491"
		/>
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

const CardDesignFourIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path
			d="M70.84 78.606v.77H6.16v-.77zm.77-.771V6.165a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v71.67c0 .426.345.77.77.77v.771l-.157-.008a1.54 1.54 0 0 1-1.383-1.533V6.165c0-.85.69-1.541 1.54-1.541h64.68c.85 0 1.54.69 1.54 1.541v71.67l-.008.157a1.54 1.54 0 0 1-1.375 1.376l-.157.008v-.77a.77.77 0 0 0 .77-.771"
			fill="#9ea9b2"
		/>
		<ellipse cx={16.17} cy={19.266} rx={6.93} ry={6.936} fill="#718491" />
		<rect x={9.24} y={41.615} width={46.2} height={3.853} rx={1.927} fill="#718491" />
		<path
			d="M9.24 53.56c0-.639.517-1.156 1.155-1.156h56.21a1.156 1.156 0 0 1 0 2.312h-56.21A1.155 1.155 0 0 1 9.24 53.56m0 5.394c0-.638.517-1.156 1.155-1.156h53.13a1.155 1.155 0 0 1 0 2.312h-53.13a1.155 1.155 0 0 1-1.155-1.156m0 10.789c0-.638.517-1.156 1.155-1.156h42.35a1.155 1.155 0 0 1 0 2.312h-42.35a1.155 1.155 0 0 1-1.155-1.156m0-5.394c0-.639.517-1.156 1.155-1.156h56.21a1.155 1.155 0 0 1 0 2.312h-56.21a1.155 1.155 0 0 1-1.155-1.156m17.71-48.166c0-.85.69-1.54 1.54-1.54h27.72a1.54 1.54 0 0 1 0 3.082H28.49c-.85 0-1.54-.69-1.54-1.542m0 5.78c0-.638.517-1.156 1.155-1.156h19.25a1.156 1.156 0 0 1 0 2.312h-19.25a1.156 1.156 0 0 1-1.155-1.156"
			fill="#8796a1"
		/>
		<path
			d="m11.7 31.417.81 1.565 1.752.276-1.255 1.238.279 1.73-1.586-.792-1.578.792.27-1.73-1.255-1.238 1.76-.276zm5.511.087.81 1.566 1.753.275-1.255 1.239.279 1.73-1.587-.792-1.577.791.27-1.73-1.256-1.238 1.761-.275zm5.51 0 .81 1.566 1.753.275-1.255 1.239.279 1.73-1.587-.792-1.578.791.27-1.73-1.255-1.238 1.761-.275zm5.511 0 .81 1.566 1.752.275-1.255 1.239.279 1.73-1.587-.792-1.577.791.27-1.73-1.255-1.238 1.76-.275zm5.511.086.81 1.566 1.753.276-1.256 1.238.28 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.239 1.76-.275z"
			fill="#718491"
		/>
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

const CardDesignFiveIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path
			d="M70.84 78.606v.77H6.16v-.77zm.77-.771V6.165a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v71.67c0 .426.345.77.77.77v.771l-.157-.008a1.54 1.54 0 0 1-1.383-1.533V6.165c0-.85.69-1.541 1.54-1.541h64.68c.85 0 1.54.69 1.54 1.541v71.67l-.008.157a1.54 1.54 0 0 1-1.375 1.376l-.157.008v-.77a.77.77 0 0 0 .77-.771"
			fill="#9ea9b2"
		/>
		<ellipse cx={16.17} cy={67.046} rx={6.93} ry={6.936} fill="#718491" />
		<path
			d="M26.95 63.963c0-.851.69-1.541 1.54-1.541h27.72a1.54 1.54 0 0 1 0 3.082H28.49c-.85 0-1.54-.69-1.54-1.54m0 5.779c0-.638.517-1.156 1.155-1.156h19.25a1.156 1.156 0 0 1 0 2.312h-19.25a1.155 1.155 0 0 1-1.155-1.156"
			fill="#8796a1"
		/>
		<rect x={9.24} y={19.266} width={46.2} height={3.853} rx={1.927} fill="#718491" />
		<path
			d="M9.24 29.67c0-.639.517-1.156 1.155-1.156h56.21a1.155 1.155 0 0 1 0 2.312h-56.21A1.155 1.155 0 0 1 9.24 29.67m0 5.394c0-.638.517-1.156 1.155-1.156h53.13a1.155 1.155 0 0 1 0 2.312h-53.13a1.155 1.155 0 0 1-1.155-1.156m0 5.395c0-.639.517-1.156 1.155-1.156h56.21a1.155 1.155 0 0 1 0 2.312h-56.21a1.156 1.156 0 0 1-1.155-1.156"
			fill="#8796a1"
		/>
		<path
			d="m11.7 9.068.81 1.566 1.752.275-1.255 1.239.279 1.73-1.586-.792-1.578.791.27-1.73-1.255-1.238 1.76-.275zm5.511.087.81 1.566 1.753.275-1.255 1.24.279 1.728-1.587-.791-1.577.791.27-1.729-1.256-1.239 1.761-.275zm5.51 0 .81 1.566 1.753.275-1.255 1.24.279 1.728-1.587-.791-1.578.791.27-1.729-1.255-1.239 1.761-.275zm5.511 0 .81 1.566 1.752.275-1.255 1.24.279 1.728-1.587-.791-1.577.791.27-1.729-1.255-1.239 1.76-.275zm5.511.087.81 1.566 1.753.275-1.256 1.239.28 1.73-1.587-.793-1.578.792.27-1.73-1.255-1.238 1.76-.275z"
			fill="#718491"
		/>
		<path d="M9.24 50.477h58.52v.385H9.24z" fill="#8796a1" />
		<path
			d="M50.82 47.009a.77.77 0 0 1 .77-.77h7.7a.77.77 0 0 1 .77.77v7.706a.77.77 0 0 1-.77.771h-7.7a.77.77 0 0 1-.77-.77z"
			fill="#fff"
		/>
		<path
			d="M59.29 55.1v.386h-7.7v-.385zm.385-.385V47.01a.385.385 0 0 0-.385-.385h-7.7a.385.385 0 0 0-.385.385v7.706c0 .213.173.386.385.386v.385l-.079-.004a.77.77 0 0 1-.687-.688l-.004-.079V47.01a.77.77 0 0 1 .77-.77h7.7a.77.77 0 0 1 .77.77v7.706a.77.77 0 0 1-.69.767l-.08.004v-.385a.385.385 0 0 0 .385-.386"
			fill="#9ea9b2"
		/>
		<path d="M53.516 49.32v3.083l1.443-1.54V49.32zm2.406 0v3.083l1.444-1.54V49.32z" fill="#718491" />
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

const CardDesignSixIcon = ({ isActive }) => (
	<svg width={77} height={84} viewBox="0 0 77 84" fill="none" xmlns="http://www.w3.org/2000/svg">
		<rect x={0.75} y={0.75} width={75.5} height={82.5} rx={2.25} fill="#fff" />
		<rect
			x={0.75}
			y={0.75}
			width={75.5}
			height={82.5}
			rx={2.25}
			stroke={isActive ? "#1a74e4" : "#718491"}
			strokeWidth={1.5}
		/>
		<path d="M12.32 49.321H5.39V5.395h66.22V49.32H20.02l-3.85 3.854z" fill="#d9d9d9" />
		<path
			d="M70.84 78.606v.77H6.16v-.77zm.77-.771V6.165a.77.77 0 0 0-.77-.77H6.16a.77.77 0 0 0-.77.77v71.67c0 .426.345.77.77.77v.771l-.157-.008a1.54 1.54 0 0 1-1.383-1.533V6.165c0-.85.69-1.541 1.54-1.541h64.68c.85 0 1.54.69 1.54 1.541v71.67l-.008.157a1.54 1.54 0 0 1-1.375 1.376l-.157.008v-.77a.77.77 0 0 0 .77-.771"
			fill="#9ea9b2"
		/>
		<ellipse cx={16.94} cy={65.505} rx={6.93} ry={6.936} fill="#718491" />
		<path
			d="M27.72 62.422c0-.851.69-1.541 1.54-1.541h27.72a1.54 1.54 0 0 1 0 3.082H29.26c-.85 0-1.54-.69-1.54-1.54m0 5.779c0-.638.517-1.156 1.155-1.156h19.25a1.155 1.155 0 0 1 0 2.312h-19.25a1.155 1.155 0 0 1-1.155-1.156"
			fill="#8796a1"
		/>
		<rect x={10.01} y={20.037} width={46.2} height={3.853} rx={1.927} fill="#647580" />
		<path
			d="M10.01 30.44c0-.638.517-1.156 1.155-1.156h54.67a1.155 1.155 0 0 1 0 2.312h-54.67a1.155 1.155 0 0 1-1.155-1.156m0 5.395c0-.639.517-1.156 1.155-1.156h51.59a1.155 1.155 0 0 1 0 2.312h-51.59a1.155 1.155 0 0 1-1.155-1.156m0 5.395c0-.64.517-1.157 1.155-1.157h52.36a1.155 1.155 0 0 1 0 2.312h-52.36a1.155 1.155 0 0 1-1.155-1.156"
			fill="#8796a1"
		/>
		<path
			d="m12.47 9.838.81 1.566 1.752.276-1.255 1.238.279 1.73-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.761-.276zm5.51.088.811 1.566 1.753.275-1.256 1.239.28 1.729-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.275zm5.51 0 .811 1.566 1.753.275-1.256 1.239.28 1.729-1.587-.792-1.578.792.27-1.73-1.255-1.238 1.76-.275zm5.511 0 .81 1.566 1.753.275-1.255 1.239.278 1.729-1.586-.792-1.578.792.27-1.73-1.255-1.238 1.761-.275zm5.511.086.811 1.566 1.752.275-1.255 1.24.279 1.729-1.587-.792-1.578.792.27-1.73-1.255-1.239 1.761-.275z"
			fill="#718491"
		/>
		{isActive && (
			<>
				<rect x={57} y={5} width={15} height={15} rx={7.5} fill="#1a74e4" />
				<path d="m60.563 12.605 2.445 3.27h1.047l4.382-6.06-1.016-.69-3.937 4.26-1.937-1.68z" fill="#fff" />
			</>
		)}
	</svg>
);

// `pro: true` designs are shown in the picker but locked in the free plugin —
// selecting one is blocked and a Pro badge/upgrade link is rendered instead.
export const cardDesignIcons = [
	{ label: "Card Design 1", value: "design-one", Icon: CardDesignOneIcon },
	{ label: "Card Design 2", value: "design-two", Icon: CardDesignTwoIcon },
	{ label: "Card Design 3", value: "design-three", Icon: CardDesignThreeIcon, pro: true },
	{ label: "Card Design 4", value: "design-four", Icon: CardDesignFourIcon, pro: true },
	{ label: "Card Design 5", value: "design-five", Icon: CardDesignFiveIcon, pro: true },
	{ label: "Card Design 6", value: "design-six", Icon: CardDesignSixIcon, pro: true },
];
