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="iconTS">
      <path
        id="Vector"
        fillRule="evenodd"
        clipRule="evenodd"
        d="M1.47192 1.47168V14.5277H14.5279V1.47168H1.47192ZM11.3926 7.81312V7.81331C11.5177 7.81369 11.6601 7.82013 11.7671 7.83174C12.2029 7.87888 12.5423 8.06691 12.831 8.42106C12.9748 8.59747 13.024 8.67465 13.0135 8.70768C13.0067 8.72899 12.9081 8.79965 12.5944 9.00784C12.2863 9.21242 12.1871 9.27369 12.164 9.27369C12.1406 9.27369 12.0919 9.22358 12.0217 9.12736C11.8865 8.94211 11.7485 8.85757 11.5352 8.82938C11.3057 8.79898 11.0999 8.8713 10.9991 9.01779C10.9129 9.14298 10.8999 9.34438 10.9684 9.49075C11.0478 9.66026 11.1914 9.75398 11.7417 9.9953C12.3765 10.2736 12.6982 10.4641 12.9324 10.7006C13.1847 10.9552 13.3125 11.2491 13.3518 11.6649C13.371 11.8676 13.3475 12.1078 13.2896 12.3031C13.1473 12.7819 12.7635 13.1324 12.2009 13.2974C12.0454 13.343 11.9007 13.3702 11.7576 13.3807C11.539 13.3968 11.2263 13.388 11.038 13.3606C10.5617 13.2912 10.0241 13.014 9.75596 12.6998C9.62434 12.5455 9.45631 12.2916 9.45631 12.247C9.45631 12.2254 9.467 12.2132 9.5093 12.1863C9.6348 12.1065 10.3539 11.6955 10.3679 11.6955C10.3763 11.6955 10.4139 11.7397 10.4513 11.7938C10.5361 11.9163 10.7448 12.1268 10.8508 12.1971C10.9374 12.2545 11.0482 12.3005 11.1797 12.3338C11.2551 12.3525 11.2949 12.3559 11.4593 12.3559C11.6272 12.3558 11.6617 12.353 11.7368 12.3328C11.9355 12.2794 12.0906 12.1687 12.1563 12.0335C12.1851 11.9751 12.1857 11.9678 12.1857 11.8261V11.6793L12.1504 11.6092C12.0649 11.4394 11.8805 11.3229 11.2977 11.0705C11.0301 10.9545 10.7022 10.791 10.5742 10.7097C10.2821 10.524 10.0796 10.3118 9.94677 10.052C9.81461 9.79369 9.79493 9.69754 9.79461 9.30909C9.79429 9.00499 9.79378 9.00873 9.85672 8.81465C9.91384 8.63853 10.0308 8.44179 10.1599 8.30458C10.4175 8.03075 10.7939 7.85475 11.1969 7.81974C11.2484 7.81485 11.3174 7.81296 11.3925 7.81318L11.3926 7.81312ZM7.92504 7.87318H7.92517C8.70127 7.87357 9.14616 7.87626 9.1533 7.88074C9.16674 7.88906 9.16844 7.95661 9.16844 8.38768V8.88499L8.394 8.88781L7.61957 8.89062V11.0894C7.61957 12.2988 7.61711 13.2955 7.61375 13.3043C7.60828 13.3191 7.54869 13.3202 7.04479 13.3202H6.482L6.47618 13.2975C6.47244 13.285 6.46968 12.2883 6.46962 11.0826L6.46943 8.8905L5.69503 8.88774L4.92056 8.88493V8.3935C4.92056 8.00374 4.92325 7.89936 4.93365 7.88899C4.94431 7.87802 5.33954 7.8752 7.04252 7.8735C7.37084 7.87318 7.66632 7.87302 7.92504 7.87318Z"
        fill="#3B3C45"
      />
    </g>
  </svg>
);

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

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