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

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

const Icon = (props: IconProps) => (
  <svg
    width="14"
    height="14"
    viewBox="0 0 14 14"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M10.5 7.00875C9.74669 7.00947 9.01371 7.25321 8.40999 7.70375L6.29999 5.59375C6.75586 4.99443 7.00185 4.26175 6.99999 3.50875C7.00197 2.72021 6.73759 1.9541 6.24973 1.33459C5.76186 0.715073 5.07908 0.278462 4.31205 0.0955081C3.54502 -0.0874454 2.73868 -0.00601915 2.02371 0.326591C1.30874 0.659201 0.727035 1.2235 0.372873 1.92805C0.0187108 2.63259 -0.087157 3.43608 0.0724264 4.20832C0.23201 4.98055 0.647693 5.67627 1.25211 6.18272C1.85652 6.68917 2.61425 6.97668 3.4025 6.99864C4.19074 7.02061 4.96331 6.77576 5.59499 6.30375L7.69999 8.41375C7.22812 9.04527 6.98326 9.81759 7.00508 10.6056C7.0269 11.3937 7.31412 12.1512 7.82021 12.7557C8.32631 13.3601 9.02164 13.776 9.79358 13.9359C10.5655 14.0959 11.3688 13.9906 12.0735 13.637C12.7781 13.2834 13.3427 12.7024 13.6758 11.9879C14.009 11.2734 14.0912 10.4674 13.9091 9.70036C13.727 8.93334 13.2913 8.25026 12.6726 7.76174C12.0539 7.27323 11.2883 7.00791 10.5 7.00875ZM0.999993 3.50875C0.999993 3.0143 1.14662 2.53095 1.42132 2.11983C1.69602 1.70871 2.08647 1.38827 2.54328 1.19906C3.0001 1.00984 3.50277 0.960328 3.98772 1.05679C4.47267 1.15325 4.91813 1.39136 5.26776 1.74099C5.61739 2.09062 5.85549 2.53608 5.95196 3.02103C6.04842 3.50598 5.99891 4.00865 5.80969 4.46546C5.62047 4.92228 5.30004 5.31272 4.88892 5.58743C4.4778 5.86213 3.99445 6.00875 3.49999 6.00875C2.83695 6.00875 2.20107 5.74536 1.73223 5.27652C1.26339 4.80768 0.999993 4.1718 0.999993 3.50875Z"
      fill="currentColor"
    />
  </svg>
);

export const ConnectIcon = styled(Icon).attrs({
  'data-component-name': 'icons/ConnectIcon/ConnectIcon',
})`
  height: ${({ size }) => size || '14px'};
  width: ${({ size }) => size || '14px'};
`;