/**
 * WordPress dependencies
 */
import { Circle, Path, Rect, SVG } from '@wordpress/components';

export const BlockIcon = () => (
	<SVG
		xmlns="http://www.w3.org/2000/svg"
		width="24"
		height="24"
		viewBox="0 0 24 24"
		fill="none"
	>
		<Path
			d="M20.497 10.7067C20.4631 9.68723 20.1568 8.71859 19.6833 7.80626C19.2732 7.02257 18.7279 6.30373 18.0796 5.70093C17.4411 5.10396 16.7082 4.61763 15.91 4.25942C15.4973 4.07545 15.0734 3.92555 14.6315 3.82288C14.2873 3.74208 13.9391 3.67871 13.5905 3.63355C12.6822 3.52154 11.7485 3.57221 10.8548 3.77094C10.0878 3.94316 9.34771 4.2239 8.6621 4.6047C7.97649 4.98549 7.34533 5.46634 6.79847 6.0283C6.1934 6.65408 5.68502 7.37108 5.31791 8.15999C5.02315 8.78942 4.80037 9.45694 4.68294 10.1444C4.5667 10.8102 4.52017 11.4916 4.57748 12.1669C4.61314 12.5959 4.67554 13.0198 4.77862 13.4419C4.87978 13.8562 5.01543 14.2636 5.18017 14.6556C5.51041 15.4361 5.9624 16.1633 6.52146 16.8046C7.09135 17.4631 7.77413 18.026 8.52493 18.4651C9.30824 18.9225 10.1759 19.2487 11.0681 19.4157C11.9388 19.5815 12.9653 19.6591 13.8434 19.5301C14.9633 19.3655 16.2722 18.2885 14.4177 18.7277C13.9781 18.8318 13.233 18.8269 12.489 18.7142C9.66796 18.287 8.0557 16.9947 6.8022 14.3656C5.73816 11.1547 6.86245 7.72506 9.63649 6.2899C11.6443 5.25114 13.6007 5.41855 15.3336 6.83164C17.0666 8.24474 17.0046 10.6168 18.1781 11.8151C18.579 12.3125 19.7478 12.4218 20.239 11.7645C20.4733 11.451 20.5089 11.0681 20.497 10.7067Z"
			strokeWidth=".5"
		/>
	</SVG>
);

export const ColorControlIcon = ( { color } ) => (
	<SVG width="24" height="24" viewBox="0 0 16 16" fill="none">
		<Circle
			cx="8"
			cy="8"
			r="6"
			style={ { fill: color, filter: 'brightness(0.8)' } }
		/>
		<Circle cx="8" cy="8" r="5.5" style={ { fill: color } } />
	</SVG>
);

export const BrushSizeControlIcon = () => (
	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none">
		<Rect x="9" y="5" width="6" height="2" rx="1" />
		<Rect x="7" y="10" width="10" height="3" rx="1.5" />
		<Rect x="5" y="16" width="14" height="4" rx="2" />
	</SVG>
);

export const BrushSizeIcon = ( { radius = 8 } ) => (
	<SVG width="24" height="24" viewBox="0 0 16 16" fill="none">
		<Circle cx="8" cy="8" r={ radius } />
	</SVG>
);
