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="iconJS">
      <path
        id="Vector"
        d="M2 2H14V14H2V2ZM5.15333 12.0267C5.42 12.5933 5.94667 13.06 6.84667 13.06C7.84667 13.06 8.53333 12.5267 8.53333 11.36V7.50667H7.4V11.3333C7.4 11.9067 7.16667 12.0533 6.8 12.0533C6.41333 12.0533 6.25333 11.7867 6.07333 11.4733L5.15333 12.0267ZM9.14 11.9067C9.47333 12.56 10.1467 13.06 11.2 13.06C12.2667 13.06 13.0667 12.5067 13.0667 11.4867C13.0667 10.5467 12.5267 10.1267 11.5667 9.71333L11.2867 9.59333C10.8 9.38667 10.5933 9.24667 10.5933 8.91333C10.5933 8.64 10.8 8.42667 11.1333 8.42667C11.4533 8.42667 11.6667 8.56667 11.86 8.91333L12.7333 8.33333C12.3667 7.69333 11.8467 7.44667 11.1333 7.44667C10.1267 7.44667 9.48 8.08667 9.48 8.93333C9.48 9.85333 10.02 10.2867 10.8333 10.6333L11.1133 10.7533C11.6333 10.98 11.94 11.12 11.94 11.5067C11.94 11.8267 11.64 12.06 11.1733 12.06C10.62 12.06 10.3 11.7733 10.06 11.3733L9.14 11.9067Z"
        fill="#3B3C45"
      />
    </g>
  </svg>
);

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

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