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="18"
    height="18"
    viewBox="0 0 18 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M8.99982 0.250052C6.9225 0.250332 4.91303 0.989665 3.33088 2.3358C1.74873 3.68193 0.697109 5.54705 0.364134 7.59751C0.0311591 9.64798 0.438552 11.75 1.51344 13.5276C2.58832 15.3052 4.26058 16.6424 6.23107 17.3001C6.66857 17.3813 6.85607 17.1126 6.85607 16.8813C6.85607 16.6501 6.85607 16.1251 6.85607 15.3938C4.42482 15.9188 3.91232 14.2188 3.91232 14.2188C3.74135 13.6831 3.38152 13.2277 2.89982 12.9376C2.10607 12.4001 2.96232 12.4063 2.96232 12.4063C3.23957 12.4455 3.50421 12.5475 3.73601 12.7045C3.96782 12.8616 4.16066 13.0696 4.29982 13.3126C4.54191 13.7468 4.94653 14.0671 5.42471 14.203C5.9029 14.339 6.4155 14.2794 6.84982 14.0376C6.88511 13.5941 7.08061 13.1786 7.39982 12.8688C5.46232 12.6438 3.41857 11.8938 3.41857 8.5438C3.4044 7.67374 3.72683 6.83182 4.31857 6.1938C4.05073 5.44017 4.08205 4.61254 4.40607 3.8813C4.40607 3.8813 5.13732 3.6438 6.81232 4.77505C8.24449 4.3844 9.75515 4.3844 11.1873 4.77505C12.8561 3.6438 13.5873 3.8813 13.5873 3.8813C13.9113 4.61254 13.9427 5.44017 13.6748 6.1938C14.2666 6.83182 14.589 7.67374 14.5748 8.5438C14.5748 11.9063 12.5311 12.6438 10.5811 12.8626C10.79 13.0743 10.951 13.3283 11.0535 13.6075C11.1559 13.8868 11.1973 14.1847 11.1748 14.4813C11.1748 15.6501 11.1748 16.5938 11.1748 16.8813C11.1748 17.1688 11.3311 17.3876 11.7998 17.3001C13.7729 16.6416 15.4469 15.3018 16.5216 13.521C17.5963 11.7401 18.0015 9.63459 17.6644 7.58204C17.3273 5.5295 16.2701 3.66416 14.6822 2.32053C13.0944 0.976903 11.0798 0.242866 8.99982 0.250052Z"
      fill="#555761"
    />
  </svg>
);

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

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