import React from 'react';

export function Icon( {
	name,
	size = 16,
	color = 'currentColor',
	strokeWidth = 1.9,
	className,
	title,
} ) {
	const props = {
		width: size,
		height: size,
		viewBox: '0 0 24 24',
		fill: 'none',
		xmlns: 'http://www.w3.org/2000/svg',
		className,
		'aria-hidden': title ? undefined : true,
		role: title ? 'img' : 'presentation',
	};

	const stroke = {
		stroke: color,
		strokeWidth,
		strokeLinecap: 'round',
		strokeLinejoin: 'round',
	};

	switch ( name ) {
		case 'dashboard':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="M3 13h8v8H3zM13 3h8v6h-8zM13 11h8v10h-8zM3 3h8v8H3z"
					/>
				</svg>
			);
		case 'cart':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="M3 4h2l2.2 10.4a2 2 0 0 0 2 1.6h8.9a2 2 0 0 0 2-1.6L22 7H7"
					/>
					<circle { ...stroke } cx="10" cy="20" r="1.3" />
					<circle { ...stroke } cx="18" cy="20" r="1.3" />
				</svg>
			);
		case 'checkout':
			return (
				<svg { ...props }>
					<rect
						{ ...stroke }
						x="3"
						y="5"
						width="18"
						height="14"
						rx="2"
					/>
					<path { ...stroke } d="M3 10h18M7 15h4" />
				</svg>
			);
		case 'gift':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="M20 12v8H4v-8M3 8h18v4H3zM12 8v12M12 8c-3.5 0-4.8-2.9-3.1-4.6C10.6 1.7 12 3.6 12 5m0 3c3.5 0 4.8-2.9 3.1-4.6C13.4 1.7 12 3.6 12 5"
					/>
				</svg>
			);
		case 'email':
			return (
				<svg { ...props }>
					<rect
						{ ...stroke }
						x="3"
						y="5"
						width="18"
						height="14"
						rx="2"
					/>
					<path { ...stroke } d="m4 7 8 6 8-6" />
				</svg>
			);
		case 'analytics':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M4 19h16M7 16l3-4 3 2 4-6" />
					<circle cx="7" cy="16" r="1.1" fill={ color } />
					<circle cx="10" cy="12" r="1.1" fill={ color } />
					<circle cx="13" cy="14" r="1.1" fill={ color } />
					<circle cx="17" cy="8" r="1.1" fill={ color } />
				</svg>
			);
		case 'funnel':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M4 5h16l-6 7v5l-4 2v-7z" />
				</svg>
			);
		case 'settings':
			return (
				<svg { ...props }>
					<circle { ...stroke } cx="12" cy="12" r="3" />
					<path
						{ ...stroke }
						d="M19.4 15a1 1 0 0 0 .2 1.1l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1 1 0 0 0-1.1-.2 1 1 0 0 0-.6.9V20a2 2 0 1 1-4 0v-.2a1 1 0 0 0-.6-.9 1 1 0 0 0-1.1.2l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1 1 0 0 0 .2-1.1 1 1 0 0 0-.9-.6H4a2 2 0 1 1 0-4h.2a1 1 0 0 0 .9-.6 1 1 0 0 0-.2-1.1l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1 1 0 0 0 1.1.2 1 1 0 0 0 .6-.9V4a2 2 0 1 1 4 0v.2a1 1 0 0 0 .6.9 1 1 0 0 0 1.1-.2l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1 1 0 0 0-.2 1.1 1 1 0 0 0 .9.6H20a2 2 0 1 1 0 4h-.2a1 1 0 0 0-.4 1.6Z"
					/>
				</svg>
			);
		case 'bolt':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M13 2 6 13h5l-1 9 8-12h-5z" />
				</svg>
			);
		case 'lock':
			return (
				<svg { ...props }>
					<rect
						{ ...stroke }
						x="5"
						y="11"
						width="14"
						height="10"
						rx="2"
					/>
					<path { ...stroke } d="M8 11V8a4 4 0 1 1 8 0v3" />
				</svg>
			);
		case 'revenue':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="M12 3v18M17 7.5c0-1.9-2.2-3.5-5-3.5s-5 1.3-5 3c0 4.5 10 2.5 10 7 0 1.7-2.2 3-5 3s-5-1.6-5-3.5"
					/>
				</svg>
			);
		case 'orders':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="m3 7 9-4 9 4-9 4-9-4Zm0 0v10l9 4 9-4V7"
					/>
				</svg>
			);
		case 'aov':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M4 19h16M7 16l3-4 3 2 4-6" />
					<circle cx="7" cy="16" r="1.1" fill={ color } />
					<circle cx="10" cy="12" r="1.1" fill={ color } />
					<circle cx="13" cy="14" r="1.1" fill={ color } />
					<circle cx="17" cy="8" r="1.1" fill={ color } />
				</svg>
			);
		case 'target':
			return (
				<svg { ...props }>
					<circle { ...stroke } cx="12" cy="12" r="8" />
					<circle { ...stroke } cx="12" cy="12" r="4" />
					<circle cx="12" cy="12" r="1.6" fill={ color } />
				</svg>
			);
		case 'recovery':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M3 12a9 9 0 1 0 2.6-6.4M3 4v5h5" />
				</svg>
			);
		case 'phone':
			return (
				<svg { ...props }>
					<rect
						{ ...stroke }
						x="8"
						y="2.5"
						width="8"
						height="19"
						rx="2"
					/>
					<circle cx="12" cy="18.5" r="1" fill={ color } />
				</svg>
			);
		case 'document':
			return (
				<svg { ...props }>
					<path { ...stroke } d="M7 3h7l5 5v13H7z" />
					<path { ...stroke } d="M14 3v5h5M9 13h6M9 17h6" />
				</svg>
			);
		case 'support':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="M12 20a8 8 0 1 0-8-8v3a2 2 0 0 0 2 2h2v-5H5a7 7 0 1 1 14 0h-3v5h1a3 3 0 0 1-3 3h-2"
					/>
				</svg>
			);
		case 'star':
			return (
				<svg { ...props }>
					<path
						{ ...stroke }
						d="m12 3 2.8 5.7 6.2.9-4.5 4.4 1 6.2-5.5-2.9-5.5 2.9 1-6.2-4.5-4.4 6.2-.9z"
					/>
				</svg>
			);
		case 'check':
			return (
				<svg { ...props }>
					<path { ...stroke } d="m5 12 4 4 10-10" />
				</svg>
			);
		case 'x':
			return (
				<svg { ...props }>
					<path { ...stroke } d="m6 6 12 12M18 6 6 18" />
				</svg>
			);
		default:
			return (
				<svg { ...props }>
					<circle cx="12" cy="12" r="2" fill={ color } />
				</svg>
			);
	}
}