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

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

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

const Icon = (props: IconProps) => (
  <svg viewBox="0 -1 38 40" strokeOpacity=".5" {...props}>
    <g fill="none" fillRule="evenodd">
      <g transform="translate(1 1)" strokeWidth="4">
        <circle strokeOpacity=".3" cx="18" cy="18" r="18" />
        <path d="M36 18c0-9.94-8.06-18-18-18">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 18 18"
            to="360 18 18"
            dur="1s"
            repeatCount="indefinite"
          />
        </path>
      </g>
    </g>
  </svg>
);

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

  height: ${({ size }) => size || '1em'};
  width: ${({ size }) => size || '1em'};
  cursor: pointer;
  left: 0.8em;
  stroke: var(--search-input-text-color);

  @media screen and (min-width: ${breakpoints.medium}) {
    width: 1.2em;
    height: 1.2em;
  }
`;