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="M6 4.99986H3.39C4.03668 4.00602 4.98721 3.24777 6.09991 2.83815C7.21262 2.42852 8.4279 2.38944 9.56462 2.72675C10.7013 3.06405 11.6986 3.75967 12.4078 4.70992C13.117 5.66017 13.5001 6.81415 13.5 7.99986H14.5C14.5014 6.6626 14.0903 5.35747 13.3227 4.26241C12.5552 3.16736 11.4686 2.33568 10.2111 1.88079C8.95358 1.4259 7.58637 1.36994 6.29589 1.72053C5.00541 2.07112 3.85447 2.8112 3 3.83986V1.99986H2V5.99986H6V4.99986Z" />
    <path d="M10 10.9999H12.61C11.9633 11.9937 11.0128 12.7519 9.90009 13.1616C8.78739 13.5712 7.5721 13.6103 6.43539 13.273C5.29867 12.9357 4.30139 12.24 3.59221 11.2898C2.88303 10.3395 2.49993 9.18556 2.5 7.99986H1.5C1.49863 9.33711 1.90973 10.6422 2.67727 11.7373C3.4448 12.8324 4.53141 13.664 5.78892 14.1189C7.04642 14.5738 8.41363 14.6298 9.70411 14.2792C10.9946 13.9286 12.1455 13.1885 13 12.1599V13.9999H14V9.99986H10V10.9999Z" />
  </svg>
);

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

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