import React from 'react';
import styled from 'styled-components';

import type { IconProps } from '@redocly/theme/icons/types';

import { getCssColorVariable } from '@redocly/theme/core/utils';

const Icon = (props: IconProps) => (
  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M7.64273 7.64733L3.64404 11.646L4.35115 12.3531L8.34984 8.35443L7.64273 7.64733Z" />
    <path d="M8.5 15C8.43668 15.0002 8.3739 14.9883 8.315 14.965C8.23309 14.9324 8.16127 14.8786 8.10682 14.8093C8.05238 14.7399 8.01725 14.6574 8.005 14.57L7.505 11.07L8.505 10.93L8.88 13.565L10.5 12.26V8.50003C10.4996 8.43423 10.5122 8.369 10.5371 8.30808C10.562 8.24716 10.5987 8.19175 10.645 8.14503L12.68 6.11003C13.0993 5.69356 13.4319 5.19806 13.6585 4.65222C13.885 4.10638 14.0011 3.52103 14 2.93003V2.00003H13.07C12.479 1.99891 11.8937 2.11499 11.3478 2.34157C10.802 2.56814 10.3065 2.90071 9.89 3.32003L7.855 5.35503C7.80828 5.40137 7.75287 5.43803 7.69196 5.46292C7.63104 5.4878 7.56581 5.50041 7.5 5.50003H3.74L2.435 7.13003L5.07 7.50503L4.93 8.50503L1.43 8.00503C1.34267 7.99278 1.26014 7.95765 1.19077 7.90321C1.1214 7.84877 1.06766 7.77695 1.035 7.69503C1.00194 7.61254 0.991465 7.52274 1.00465 7.43485C1.01783 7.34697 1.0542 7.26419 1.11 7.19503L3.11 4.69503C3.15606 4.63519 3.21508 4.58655 3.28263 4.55278C3.35017 4.51901 3.42449 4.50097 3.5 4.50003H7.295L9.18 2.61003C9.68959 2.09758 10.2958 1.6914 10.9636 1.41503C11.6313 1.13865 12.3473 0.997596 13.07 1.00003H14C14.2652 1.00003 14.5196 1.10539 14.7071 1.29292C14.8946 1.48046 15 1.73481 15 2.00003V2.93003C15.0024 3.65271 14.8614 4.36869 14.585 5.03645C14.3086 5.7042 13.9024 6.31045 13.39 6.82003L11.5 8.70503V12.5C11.4997 12.5751 11.4824 12.6492 11.4495 12.7167C11.4166 12.7842 11.3689 12.8435 11.31 12.89L8.81 14.89C8.72203 14.9606 8.61278 14.9994 8.5 15Z" />
  </svg>
);

export const RocketIcon = styled(Icon).attrs({
  'data-component-name': 'icons/RocketIcon/RocketIcon',
})`
  path {
    fill: ${({ color }) => getCssColorVariable(color)};
  }

  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};
`;
