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="14"
    height="16"
    viewBox="0 0 14 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
    color="#E535AB"
  >
    <path
      d="M0.723804 11.7744L1.29883 12.1064L7.70483 1.01125L7.1298 0.679253L0.723804 11.7744Z"
      fill="#22242B"
    />
    <path d="M13.4043 10.8882H0.592285V11.5522H13.4043V10.8882Z" fill="#E535AB" />
    <path
      d="M0.845506 11.2609L7.25391 14.9609L7.58591 14.3859L1.17751 10.6859L0.845506 11.2609Z"
      fill="#E535AB"
    />
    <path
      d="M6.4124 1.61787L12.8208 5.31787L13.1528 4.74285L6.7444 1.04285L6.4124 1.61787Z"
      fill="#E535AB"
    />
    <path
      d="M0.847688 4.74041L1.17969 5.31543L7.58809 1.61543L7.25609 1.04041L0.847688 4.74041Z"
      fill="#E535AB"
    />
    <path
      d="M6.29664 1.01125L12.7026 12.1064L13.2777 11.7744L6.87166 0.679253L6.29664 1.01125Z"
      fill="#E535AB"
    />
    <path d="M1.7641 4.2998H1.1001V11.6998H1.7641V4.2998Z" fill="#E535AB" />
    <path d="M12.9003 4.2998H12.2363V11.6998H12.9003V4.2998Z" fill="#E535AB" />
    <path
      d="M6.85111 14.1774L7.14111 14.6797L12.7147 11.4617L12.4247 10.9594L6.85111 14.1774Z"
      fill="#E535AB"
    />
    <path
      d="M13.7802 11.9162C13.3962 12.5842 12.5402 12.8122 11.8722 12.4282C11.2042 12.0442 10.9762 11.1882 11.3602 10.5202C11.7442 9.85218 12.6002 9.62418 13.2682 10.0082C13.9402 10.3962 14.1682 11.2482 13.7802 11.9162Z"
      fill="#E535AB"
    />
    <path
      d="M2.63619 5.48014C2.25219 6.14814 1.39619 6.37614 0.728188 5.99215C0.0601878 5.60814 -0.167812 4.75214 0.216188 4.08414C0.600188 3.41614 1.45619 3.18814 2.12419 3.57214C2.79219 3.96014 3.02019 4.81214 2.63619 5.48014Z"
      fill="#E535AB"
    />
    <path
      d="M0.220094 11.9162C-0.163906 11.2482 0.064094 10.3962 0.732094 10.0082C1.40009 9.62418 2.25209 9.85218 2.64009 10.5202C3.02409 11.1882 2.79609 12.0402 2.12809 12.4282C1.45609 12.8122 0.604094 12.5842 0.220094 11.9162Z"
      fill="#E535AB"
    />
    <path
      d="M11.3641 5.48014C10.9801 4.81214 11.2081 3.96014 11.8761 3.57214C12.5441 3.18814 13.3961 3.41614 13.7841 4.08414C14.1681 4.75214 13.9401 5.60415 13.2721 5.99215C12.6041 6.37614 11.7481 6.14814 11.3641 5.48014Z"
      fill="#E535AB"
    />
    <path
      d="M7 15.832C6.228 15.832 5.604 15.208 5.604 14.436C5.604 13.664 6.228 13.04 7 13.04C7.772 13.04 8.396 13.664 8.396 14.436C8.396 15.204 7.772 15.832 7 15.832Z"
      fill="#E535AB"
    />
    <path
      d="M7 2.95997C6.228 2.95997 5.604 2.33597 5.604 1.56397C5.604 0.791969 6.228 0.167969 7 0.167969C7.772 0.167969 8.396 0.791969 8.396 1.56397C8.396 2.33597 7.772 2.95997 7 2.95997Z"
      fill="#E535AB"
    />
  </svg>
);

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

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