import { __ } from '@wordpress/i18n';

/**
 * Preloader catalogue ported from the source design system's kernel.
 * Minimal port: only the default preloader is carried over — the Loading
 * atom falls back to the first entry whenever the configured id is missing.
 */
export const PRELOADERS = [
	{
		id: 1,
		title: __( 'Default', 'rewind-form-bridge-for-brevo' ),
		isPro: false,
		icon: (
			<svg
				className="lds-balls"
				width="80px"
				height="80px"
				xmlns="http://www.w3.org/2000/svg"
				xmlnsXlink="http://www.w3.org/1999/xlink"
				viewBox="0 0 100 100"
				preserveAspectRatio="xMidYMid"
			>
				<circle cx="67.8023" cy="59.9068" r={ 6 } fill="#51CACC">
					<animate
						attributeName="cx"
						values="75;57.72542485937369"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="cy"
						values="50;73.77641290737884"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="fill"
						values="#51CACC;#9DF871"
						dur="1s"
						repeatCount="indefinite"
					/>
				</circle>
				<circle cx="46.0792" cy="69.9923" r={ 6 } fill="#9DF871">
					<animate
						attributeName="cx"
						values="57.72542485937369;29.774575140626318"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="cy"
						values="73.77641290737884;64.69463130731182"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="fill"
						values="#9DF871;#E0FF77"
						dur="1s"
						repeatCount="indefinite"
					/>
				</circle>
				<circle cx="29.7746" cy="52.4491" r={ 6 } fill="#E0FF77">
					<animate
						attributeName="cx"
						values="29.774575140626318;29.774575140626315"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="cy"
						values="64.69463130731182;35.30536869268818"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="fill"
						values="#E0FF77;#DE9DD6"
						dur="1s"
						repeatCount="indefinite"
					/>
				</circle>
				<circle cx="41.4208" cy="31.5213" r={ 6 } fill="#DE9DD6">
					<animate
						attributeName="cx"
						values="29.774575140626315;57.72542485937368"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="cy"
						values="35.30536869268818;26.22358709262116"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="fill"
						values="#DE9DD6;#FF708E"
						dur="1s"
						repeatCount="indefinite"
					/>
				</circle>
				<circle cx="64.9232" cy="36.1304" r={ 6 } fill="#FF708E">
					<animate
						attributeName="cx"
						values="57.72542485937368;75"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="cy"
						values="26.22358709262116;49.99999999999999"
						dur="1s"
						repeatCount="indefinite"
					/>
					<animate
						attributeName="fill"
						values="#FF708E;#51CACC"
						dur="1s"
						repeatCount="indefinite"
					/>
				</circle>
			</svg>
		),
	},
];
