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="iconJson">
      <path
        id="Vector"
        d="M3.83937 2.65039H5.02803V3.84039H3.83937V6.81239C3.83928 6.96849 3.80845 7.12304 3.74863 7.26722C3.68881 7.41141 3.60118 7.54239 3.49074 7.65271C3.3803 7.76303 3.24922 7.85051 3.10497 7.91016C2.96072 7.96982 2.80613 8.00048 2.65003 8.00039C2.80619 8.0003 2.96083 8.03099 3.10512 8.09068C3.24941 8.15038 3.38053 8.23792 3.49098 8.34831C3.60143 8.4587 3.68904 8.58976 3.74882 8.73402C3.8086 8.87828 3.83937 9.0329 3.83937 9.18906V12.1617H5.02803V13.3504H3.83937C3.20337 13.1904 2.65003 12.8151 2.65003 12.1617V9.78373C2.65003 9.46847 2.5248 9.16613 2.30188 8.94321C2.07896 8.72029 1.77662 8.59506 1.46137 8.59506H0.866699V7.40639H1.46137C1.61752 7.40639 1.77214 7.37562 1.9164 7.31585C2.06066 7.25607 2.19173 7.16845 2.30212 7.058C2.4125 6.94756 2.50005 6.81644 2.55974 6.67215C2.61944 6.52785 2.65012 6.37321 2.65003 6.21706V3.84039C2.64986 3.68407 2.68052 3.52925 2.74026 3.38479C2.8 3.24033 2.88765 3.10908 2.99818 2.99854C3.10872 2.88801 3.23998 2.80036 3.38443 2.74062C3.52889 2.68088 3.68371 2.65022 3.84003 2.65039M12.162 2.65039C12.3182 2.65039 12.4728 2.68116 12.6171 2.74094C12.7613 2.80071 12.8924 2.88833 13.0028 2.99878C13.1132 3.10923 13.2007 3.24034 13.2604 3.38464C13.3201 3.52893 13.3508 3.68357 13.3507 3.83972V6.21706C13.3506 6.37321 13.3813 6.52785 13.441 6.67215C13.5007 6.81644 13.5882 6.94756 13.6986 7.058C13.809 7.16845 13.9401 7.25607 14.0843 7.31585C14.2286 7.37562 14.3832 7.40639 14.5394 7.40639H15.134V8.59506H14.5394C14.3833 8.59506 14.2287 8.6258 14.0845 8.68554C13.9403 8.74528 13.8092 8.83283 13.6989 8.94321C13.5885 9.05359 13.5009 9.18463 13.4412 9.32884C13.3814 9.47306 13.3507 9.62763 13.3507 9.78373V12.1617C13.3507 12.477 13.2255 12.7793 13.0025 13.0022C12.7796 13.2252 12.4773 13.3504 12.162 13.3504H10.9727V12.1617H12.162V9.18906C12.162 8.87392 12.2872 8.57168 12.51 8.34878C12.7327 8.12588 13.0349 8.00057 13.35 8.00039C13.0348 8.00039 12.7324 7.87516 12.5095 7.65224C12.2866 7.42932 12.1614 7.12698 12.1614 6.81172V3.83972H10.972V2.65039H12.162ZM8.00003 9.78373C8.15775 9.78373 8.309 9.84638 8.42053 9.9579C8.53205 10.0694 8.5947 10.2207 8.5947 10.3784C8.5947 10.5361 8.53205 10.6874 8.42053 10.7989C8.309 10.9104 8.15775 10.9731 8.00003 10.9731C7.84243 10.9729 7.69135 10.9102 7.57997 10.7986C7.46859 10.6871 7.40603 10.536 7.40603 10.3784C7.40603 10.2208 7.46859 10.0696 7.57997 9.95813C7.69135 9.84663 7.84243 9.7839 8.00003 9.78373ZM5.6227 9.78373C5.7803 9.7839 5.93138 9.84663 6.04276 9.95813C6.15414 10.0696 6.2167 10.2208 6.2167 10.3784C6.2167 10.536 6.15414 10.6871 6.04276 10.7986C5.93138 10.9102 5.7803 10.9729 5.6227 10.9731C5.54461 10.9731 5.46728 10.9577 5.39513 10.9278C5.32298 10.8979 5.25743 10.8541 5.20221 10.7989C5.14699 10.7437 5.10318 10.6781 5.0733 10.606C5.04341 10.5338 5.02803 10.4565 5.02803 10.3784C5.02803 10.3003 5.04341 10.223 5.0733 10.1508C5.10318 10.0787 5.14699 10.0131 5.20221 9.9579C5.25743 9.90268 5.32298 9.85888 5.39513 9.82899C5.46728 9.79911 5.54461 9.78373 5.6227 9.78373ZM10.378 9.78373C10.5356 9.7839 10.6867 9.84663 10.7981 9.95813C10.9095 10.0696 10.972 10.2208 10.972 10.3784C10.972 10.536 10.9095 10.6871 10.7981 10.7986C10.6867 10.9102 10.5356 10.9729 10.378 10.9731C10.2203 10.9731 10.0691 10.9104 9.95754 10.7989C9.84602 10.6874 9.78337 10.5361 9.78337 10.3784C9.78337 10.2207 9.84602 10.0694 9.95754 9.9579C10.0691 9.84638 10.2203 9.78373 10.378 9.78373Z"
        fill="#3B3C45"
      />
    </g>
  </svg>
);

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

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