import React from 'react';

export interface ITipTapIconProps {
	color?: string;
	size?: number;
}

const TipTapIcon = ({ color = '#8e8ea9', size = 16 }: ITipTapIconProps): JSX.Element => (
	<svg width={size} height={size} viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M36.3979 0C30.1994 0 24.3628 1.54943 19.2542 4.2821H53.5415C48.4329 1.54943 42.5963 0 36.3979 0Z"
			fill={color}
		/>
		<path
			d="M59.8522 8.56344H12.9435C11.3953 9.86933 9.95759 11.302 8.64635 12.8455H64.1494C62.8381 11.302 61.4004 9.86933 59.8522 8.56344Z"
			fill={color}
		/>
		<path
			d="M67.2822 17.1283H5.51348C4.6575 18.4974 3.89002 19.9274 3.21906 21.4104H69.5766C68.9057 19.9274 68.1382 18.4974 67.2822 17.1283Z"
			fill={color}
		/>
		<path
			d="M71.1957 25.6918H1.60004C1.1718 27.0853 0.824967 28.5146 0.5651 29.9739H72.2306C71.9707 28.5146 71.6239 27.0853 71.1957 25.6918Z"
			fill={color}
		/>
		<path
			d="M72.7338 34.2567H0.0619353C0.0208355 34.9651 0 35.6791 0 36.3979C0 37.1165 0.0208297 37.8304 0.0619182 38.5387H72.7338C72.7749 37.8304 72.7957 37.1165 72.7957 36.3979C72.7957 35.6791 72.7749 34.9651 72.7338 34.2567Z"
			fill={color}
		/>
		<path
			d="M72.2307 42.8215H0.565048C0.824902 44.2809 1.17172 45.7101 1.59995 47.1036H71.1957C71.624 45.7101 71.9708 44.2809 72.2307 42.8215Z"
			fill={color}
		/>
		<path
			d="M69.5768 51.385H3.21892C3.88987 52.868 4.65733 54.298 5.51329 55.6671H67.2824C68.1384 54.298 68.9058 52.868 69.5768 51.385Z"
			fill={color}
		/>
		<path
			d="M64.1496 59.9499H8.6461C9.95731 61.4934 11.395 62.9261 12.9431 64.232H59.8526C61.4007 62.9261 62.8384 61.4934 64.1496 59.9499Z"
			fill={color}
		/>
		<path
			d="M53.542 68.5133H19.2537C24.3216 71.2244 30.1061 72.7709 36.2497 72.7954H36.546C42.6896 72.7709 48.4741 71.2244 53.542 68.5133Z"
			fill={color}
		/>
	</svg>
);

export default TipTapIcon;