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="M13 9C13 9.98891 12.7068 10.9556 12.1574 11.7779C11.6079 12.6001 10.8271 13.241 9.91342 13.6194C8.99979 13.9978 7.99446 14.0969 7.02455 13.9039C6.05465 13.711 5.16373 13.2348 4.46447 12.5355C3.76521 11.8363 3.289 10.9454 3.09608 9.97545C2.90315 9.00555 3.00217 8.00021 3.38061 7.08658C3.75904 6.17295 4.39991 5.39206 5.22215 4.84265C6.0444 4.29324 7.0111 4 8 4H11.0911L9.29885 5.7927L10 6.5L13 3.5L10 0.5L9.29885 1.207L11.0926 3H8C6.81331 3 5.65328 3.35189 4.66658 4.01118C3.67989 4.67047 2.91085 5.60754 2.45673 6.7039C2.0026 7.80026 1.88378 9.00666 2.11529 10.1705C2.3468 11.3344 2.91825 12.4035 3.75736 13.2426C4.59648 14.0818 5.66558 14.6532 6.82946 14.8847C7.99335 15.1162 9.19975 14.9974 10.2961 14.5433C11.3925 14.0892 12.3295 13.3201 12.9888 12.3334C13.6481 11.3467 14 10.1867 14 9H13Z" />
  </svg>
);

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

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