/**
 * External dependencies
 */
import { Rect, SVG, G } from '@wordpress/primitives';

export const CartPlaceholder = () => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 516">
		<G fill="currentColor" transform="translate(-1)">
			<Rect width="100" height="20" x="1" rx="2" />
			<Rect width="100" height="20" x="421" rx="2" />
			<Rect width="100" height="20" x="793" rx="2" />
			<Rect width="150" height="24" x="125" y="48" rx="2" />
			<Rect width="50" height="24" x="125" y="86" rx="2" />
			<Rect width="50" height="24" x="457" y="48" rx="2" />
			<Rect width="100" height="100" x="15" y="48" rx="2" />
			<Rect width="150" height="150" x="1" y="318" rx="2" />
			<Rect width="150" height="150" x="373" y="318" rx="2" />
			<Rect width="150" height="150" x="187" y="318" rx="2" />
			<Rect width="150" height="24" x="125" y="178" rx="2" />
			<Rect width="50" height="24" x="125" y="216" rx="2" />
			<Rect width="50" height="24" x="457" y="178" rx="2" />
			<Rect width="100" height="100" x="15" y="178" rx="2" />
			<Rect width="304" height="359" x="588" y="34" rx="2" />
			<Rect width="520" height="1" x="1" y="34" rx=".5" />
			<Rect width="520" height="1" y="162" rx=".5" />
			<Rect width="520" height="1" x="1" y="292" rx=".5" />
			<Rect width="304" height="64" x="589" y="407" rx="2" />
			<Rect width="100" height="38" x="26" y="478" rx="2" />
			<Rect width="100" height="38" x="212" y="478" rx="2" />
			<Rect width="100" height="38" x="398" y="478" rx="2" />
		</G>
	</SVG>
);

export const CheckoutPlaceholder = () => (
	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892 726">
		<G fill="currentColor" transform="translate(-1)">
			<Rect width="203" height="38" x="1" rx="2" />
			<Rect width="434" height="38" x="1" y="62" rx="2" />
			<Rect width="434" height="38" y="124" rx="2" />
			<Rect width="434" height="38" x="1" y="186" rx="2" />
			<Rect width="434" height="38" x="2" y="248" rx="2" />
			<Rect width="434" height="38" x="3" y="310" rx="2" />
			<Rect width="434" height="38" x="3" y="372" rx="2" />
			<Rect width="892" height="204" x="2" y="434" rx="2" />
			<Rect width="203" height="38" x="231" rx="2" />
			<Rect width="203" height="38" x="514" rx="2" />
			<Rect width="427" height="100" x="466" y="62" rx="2" />
			<Rect width="304" height="64" x="588" y="662" rx="2" />
			<Rect width="38" height="38" x="466" rx="2" />
			<Rect width="203" height="38" x="48" y="662" rx="2" />
			<Rect width="38" height="38" y="662" rx="2" />
		</G>
	</SVG>
);