import React from 'react';
import withIconSvg from '../helpers/withIconSvg';

export interface Props {
	size?: 's' | 'l';
}

const YieldIcon: React.FC<Props> = (props) => {
	const { size, ...restProps } = props;

	switch (size) {
		case 'l':
			return (
				<svg
					width="34"
					height="31"
					viewBox="0 0 34 31"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					{...restProps}
				>
					<path
						fillRule="evenodd"
						clipRule="evenodd"
						d="M21.3751 2.5571L33.0751 22.5221C34.0751 24.1941 33.9751 26.0627 33.0751 27.6363C32.1751 29.2099 30.4751 30.1934 28.5751 30.1934H5.17501C3.27501 30.1934 1.575 29.2099 0.675002 27.6363C-0.225001 26.0627 -0.225001 24.0957 0.675002 22.5221L12.375 2.5571C13.275 0.983504 14.975 0 16.875 0C18.7751 0 20.4751 0.983504 21.3751 2.5571ZM28.5751 28.3247C29.7751 28.3247 30.7751 27.7346 31.3751 26.7511C31.9751 25.7677 31.9751 24.4891 31.2751 23.6039L19.5751 3.63895C18.9751 2.65546 17.975 2.06535 16.775 2.06535C15.575 2.06535 14.575 2.65546 13.975 3.63895L2.275 23.6039C1.675 24.5874 1.675 25.7677 2.275 26.7511C2.87501 27.7346 3.87501 28.3247 5.07502 28.3247H28.5751ZM17.2751 9.53992H16.275C15.675 9.53992 15.375 9.83496 15.375 10.4251L15.575 19.5716C15.575 20.1617 15.975 20.4567 16.475 20.4567H17.0751C17.6751 20.4567 17.9751 20.1617 17.9751 19.5716L18.1751 10.4251C18.2751 9.83496 17.8751 9.53992 17.2751 9.53992ZM17.2751 22.3254H16.3751C15.7751 22.3254 15.4751 22.6205 15.4751 23.2106V23.9974C15.4751 24.5875 15.7751 24.8826 16.3751 24.8826H17.2751C17.8751 24.8826 18.175 24.5875 18.175 23.9974V23.2106C18.175 22.6205 17.8751 22.3254 17.2751 22.3254Z"
					/>
				</svg>
			);
		case 's':
		default:
			return (
				<svg width="21" height="18" viewBox="0 0 21 18" xmlns="http://www.w3.org/2000/svg" {...restProps}>
					<path
						fillRule="evenodd"
						clipRule="evenodd"
						d="M18.8348 10.9877L13.4981 2.68623L13.4408 2.59696L13.4408 2.59693C13.1135 2.08739 12.7582 1.53413 12.4008 1.12536C11.9993 0.666244 11.2645 0 10.1334 0C9.00227 0 8.26756 0.666245 7.86606 1.12536C7.50859 1.53414 7.15327 2.08742 6.82603 2.59698L6.76869 2.68623L1.43203 10.9877L1.36967 11.0847L1.36966 11.0847C0.987648 11.6784 0.589021 12.298 0.343794 12.8408C0.0823667 13.4194 -0.271713 14.4826 0.331937 15.5883C0.935587 16.694 2.0214 16.9711 2.6495 17.0641C3.23868 17.1513 3.97543 17.151 4.68147 17.1508L4.79674 17.1507H15.4701L15.5854 17.1508C16.2914 17.151 17.0281 17.1513 17.6173 17.0641C18.2454 16.9711 19.3312 16.694 19.9349 15.5883C20.5385 14.4826 20.1844 13.4194 19.923 12.8408C19.6778 12.298 19.2792 11.6784 18.8972 11.0847L18.8348 10.9877ZM17.1524 12.0692L11.8158 3.76774C11.0582 2.58925 10.6794 2 10.1334 2C9.58746 2 9.20865 2.58925 8.45105 3.76774L3.11438 12.0692C2.24014 13.4292 1.80302 14.1091 2.08736 14.6299C2.3717 15.1507 3.18005 15.1507 4.79674 15.1507H15.4701C17.0868 15.1507 17.8951 15.1507 18.1795 14.6299C18.4638 14.1091 18.0267 13.4292 17.1524 12.0692ZM10.2584 10.8108C9.70612 10.8108 9.25841 10.3631 9.25841 9.81078V5.81078C9.25841 5.25849 9.70612 4.81078 10.2584 4.81078C10.8107 4.81078 11.2584 5.25849 11.2584 5.81078V9.81078C11.2584 10.3631 10.8107 10.8108 10.2584 10.8108ZM9.13341 12.7458C9.13341 12.1245 9.63709 11.6208 10.2584 11.6208C10.8797 11.6208 11.3834 12.1245 11.3834 12.7458C11.3834 13.3671 10.8797 13.8708 10.2584 13.8708C9.63709 13.8708 9.13341 13.3671 9.13341 12.7458Z"
					/>
				</svg>
			);
	}
};

YieldIcon.defaultProps = {
	size: 's',
};

export default withIconSvg(YieldIcon, true, {
	additionalProps: [
		{
			propName: 'size',
			type: 'select',
			options: ['s', 'l'], // todo: how to automatically get these options???
			default: YieldIcon.defaultProps.size,
		},
	],
	tags: ['yield', 'caution', 'warning', 'error', 'outage'],
});