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

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

const Icon = (props: IconProps) => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 100 100"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      clipRule="evenodd"
      d="m70.9119 99.3171c1.575.6136 3.3709.5743 4.9606-.1907l20.5883-9.9067c2.1634-1.041 3.5392-3.2305 3.5392-5.6325v-67.1739c0-2.402-1.3757-4.5915-3.5391-5.6325l-20.5884-9.907044c-2.0863-1.003885-4.5279-.757996-6.359.573194-.2615.19016-.5107.40248-.7445.63646l-39.4139 35.95809-17.1679-13.0319c-1.5982-1.2131-3.83357-1.1137-5.31787.2365l-5.5063 5.0088c-1.815582 1.6515-1.817663 4.5078-.0045 6.1621l14.88857 13.5831-14.88857 13.5831c-1.813163 1.6542-1.811082 4.5106.0045 6.1621l5.5063 5.0088c1.4843 1.3502 3.71967 1.4496 5.31787.2364l17.1679-13.0318 39.4139 35.958c.6235.6239 1.3556 1.0937 2.1429 1.4004zm4.1033-72.0182-29.9061 22.7012 29.9061 22.7011z"
      fill="currentColor"
      fillRule="evenodd"
    />
  </svg>
);

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