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
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g id="iconReact">
      <path
        id="Vector"
        d="M7.99992 6.74022C8.68658 6.74022 9.24658 7.30022 9.24658 8.00022C9.24658 8.66689 8.68658 9.23356 7.99992 9.23356C7.31325 9.23356 6.75325 8.66689 6.75325 8.00022C6.75325 7.30022 7.31325 6.74022 7.99992 6.74022ZM4.91325 13.3336C5.33325 13.5869 6.25325 13.2002 7.31325 12.2002C6.96659 11.8069 6.62659 11.3802 6.30658 10.9336C5.76935 10.8821 5.23526 10.802 4.70658 10.6936C4.36659 12.1202 4.49325 13.1002 4.91325 13.3336ZM5.38658 9.50689L5.19325 9.16689C5.11992 9.36022 5.04659 9.55356 4.99992 9.74022C5.17992 9.78022 5.37992 9.81356 5.58659 9.84689L5.38658 9.50689ZM9.74658 9.00022L10.2866 8.00022L9.74658 7.00022C9.54659 6.64689 9.33325 6.33356 9.13992 6.02022C8.77992 6.00022 8.39992 6.00022 7.99992 6.00022C7.59992 6.00022 7.21992 6.00022 6.85992 6.02022C6.66658 6.33356 6.45325 6.64689 6.25325 7.00022L5.71325 8.00022L6.25325 9.00022C6.45325 9.35356 6.66658 9.66689 6.85992 9.98022C7.21992 10.0002 7.59992 10.0002 7.99992 10.0002C8.39992 10.0002 8.77992 10.0002 9.13992 9.98022C9.33325 9.66689 9.54659 9.35356 9.74658 9.00022ZM7.99992 4.52022C7.87325 4.66689 7.73992 4.82022 7.60658 5.00022H8.39325C8.25992 4.82022 8.12659 4.66689 7.99992 4.52022ZM7.99992 11.4802C8.12659 11.3336 8.25992 11.1802 8.39325 11.0002H7.60658C7.73992 11.1802 7.87325 11.3336 7.99992 11.4802ZM11.0799 2.66689C10.6666 2.41356 9.74658 2.80022 8.68658 3.80022C9.03325 4.19356 9.37325 4.62022 9.69325 5.06689C10.2399 5.12022 10.7799 5.20022 11.2933 5.30689C11.6333 3.88022 11.5066 2.90022 11.0799 2.66689ZM10.6133 6.49356L10.8066 6.83356C10.8799 6.64022 10.9533 6.44689 10.9999 6.26022C10.8199 6.22022 10.6199 6.18689 10.4133 6.15356L10.6133 6.49356ZM11.5799 1.79356C12.5599 2.35356 12.6666 3.82689 12.2533 5.54689C13.9466 6.04689 15.1666 6.87356 15.1666 8.00022C15.1666 9.12689 13.9466 9.95356 12.2533 10.4536C12.6666 12.1736 12.5599 13.6469 11.5799 14.2069C10.6066 14.7669 9.27992 14.1269 7.99992 12.9069C6.71992 14.1269 5.39325 14.7669 4.41325 14.2069C3.43992 13.6469 3.33325 12.1736 3.74659 10.4536C2.05325 9.95356 0.833252 9.12689 0.833252 8.00022C0.833252 6.87356 2.05325 6.04689 3.74659 5.54689C3.33325 3.82689 3.43992 2.35356 4.41325 1.79356C5.39325 1.23356 6.71992 1.87356 7.99992 3.09356C9.27992 1.87356 10.6066 1.23356 11.5799 1.79356ZM11.3866 8.00022C11.6133 8.50022 11.8133 9.00022 11.9799 9.50689C13.3799 9.08689 14.1666 8.48689 14.1666 8.00022C14.1666 7.51356 13.3799 6.91356 11.9799 6.49356C11.8133 7.00022 11.6133 7.50022 11.3866 8.00022ZM4.61325 8.00022C4.38659 7.50022 4.18659 7.00022 4.01992 6.49356C2.61992 6.91356 1.83325 7.51356 1.83325 8.00022C1.83325 8.48689 2.61992 9.08689 4.01992 9.50689C4.18659 9.00022 4.38659 8.50022 4.61325 8.00022ZM10.6133 9.50689L10.4133 9.84689C10.6199 9.81356 10.8199 9.78022 10.9999 9.74022C10.9533 9.55356 10.8799 9.36022 10.8066 9.16689L10.6133 9.50689ZM8.68658 12.2002C9.74658 13.2002 10.6666 13.5869 11.0799 13.3336C11.5066 13.1002 11.6333 12.1202 11.2933 10.6936C10.7799 10.8002 10.2399 10.8802 9.69325 10.9336C9.37325 11.3802 9.03325 11.8069 8.68658 12.2002ZM5.38658 6.49356L5.58659 6.15356C5.37992 6.18689 5.17992 6.22022 4.99992 6.26022C5.04659 6.44689 5.11992 6.64022 5.19325 6.83356L5.38658 6.49356ZM7.31325 3.80022C6.25325 2.80022 5.33325 2.41356 4.91325 2.66689C4.49325 2.90022 4.36659 3.88022 4.70658 5.30689C5.23526 5.19842 5.76935 5.1183 6.30658 5.06689C6.62659 4.62022 6.96659 4.19356 7.31325 3.80022Z"
        fill="#3B3C45"
      />
    </g>
  </svg>
);

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

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