/**
 * External dependencies
 */
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
import { useInstanceId } from '@wordpress/compose';

const INTRINSIC_ICON_WIDTH = 42;
const INTRINSIC_ICON_HEIGHT = 29;
const INTRINSIC_STROKE_WIDTH = 2;

export function IconLaptopSearch({ width = INTRINSIC_ICON_WIDTH, ...props }) {
	const clipPathId = `clip-icon-laptop-search-${useInstanceId(
		IconLaptopSearch
	)}`;
	const strokeWidth = INTRINSIC_STROKE_WIDTH * (INTRINSIC_ICON_WIDTH / width);

	return (
		<svg
			viewBox={`0 0 ${INTRINSIC_ICON_WIDTH} ${INTRINSIC_ICON_HEIGHT}`}
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
			width={width}
			{...props}
		>
			<g clipPath={`url(#${clipPathId})`}>
				<path
					d="M9.102 6.577l-.017 3.95a1.89 1.89 0 001.882 1.897l15.76.066a1.89 1.89 0 001.898-1.882l.016-3.95a1.89 1.89 0 00-1.882-1.897L11 4.694a1.89 1.89 0 00-1.897 1.883z"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
				<path
					d="M13.14 9.2a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3zM9.13 18.03a1.15 1.15 0 100-2.3 1.15 1.15 0 000 2.3z"
					fill="#005AF0"
				/>
				<path
					d="M12.24 16.88h4.63M19.83 16.88h1.79M14.46 12.22l7.98-4.97 4.36 5.22"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
				<path
					d="M4.24 19.65V3.71A2.71 2.71 0 016.95 1h22.74a2.71 2.71 0 012.72 2.71v16.43M23.5 20.35v.82H13.24v-.82H1v2a2.1 2.1 0 002.09 2h30.59a2.1 2.1 0 002.09-2.09v-2l-12.27.09z"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
				<path
					d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z"
					fill="#fff"
				/>
				<path
					d="M33.622 20.67l-.686.686a2 2 0 000 2.829l3.14 3.14a2 2 0 002.828 0l.686-.687a2 2 0 000-2.828l-3.14-3.14a2 2 0 00-2.828 0z"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
				<path
					d="M29.37 23.51a6.4 6.4 0 100-12.8 6.4 6.4 0 000 12.8z"
					fill="#fff"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
				<path
					d="M32.11 15.98a2.999 2.999 0 01-2.93 3.8"
					stroke="#005AF0"
					strokeWidth={strokeWidth}
					strokeLinecap="round"
					strokeLinejoin="round"
				/>
			</g>
			<defs>
				<clipPath id={clipPathId}>
					<path fill="#fff" d="M0 0h41.21v28.96H0z" />
				</clipPath>
			</defs>
		</svg>
	);
}
IconLaptopSearch.propTypes = {
	width: PropTypes.number,
};
