import { Path, SVG } from '@wordpress/components';

/**
 * @todo Replace with `@wordpress/icons` when available
 */
export const leftChevron = (
	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
		<Path d="M5 8.70002L10.6 14.4L12 12.9L7.8 8.70002L12 4.50002L10.6 3.00002L5 8.70002Z" />
	</SVG>
);

/**
 * @todo Replace with `@wordpress/icons` when available
 */
export const rightChevron = (
	<SVG width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
		<Path d="M13 8.7L7.4 3L6 4.5L10.2 8.7L6 12.9L7.4 14.4L13 8.7Z" />
	</SVG>
);

/**
 * @todo Replace with `@wordpress/icons` when available
 */
export const downChevron = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z" />
	</SVG>
);

/**
 * @todo Replace with `@wordpress/icons` when available
 */
export const upChevron = (
	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M12,8l-6,6l1.41,1.41L12,10.83l4.59,4.58L18,14L12,8z" />
	</SVG>
);

/**
 * @todo Replace with `@wordpress/icons` when available
 */
export const close = (
	<SVG width="18" height="18" viewBox="-2 -2 24 24" xmlns="http://www.w3.org/2000/svg">
		<Path d="M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z" />
	</SVG>
);
