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}
  >
    <path
      d="M6.57325 1.33301C6.06757 1.33301 5.5826 1.53389 5.22504 1.89146C4.86747 2.24903 4.66659 2.734 4.66659 3.23967V4.35967H7.52659C7.78659 4.35967 7.99992 4.73967 7.99992 4.99967H3.23992C2.73424 4.99967 2.24927 5.20055 1.8917 5.55812C1.53413 5.91569 1.33325 6.40066 1.33325 6.90634V9.42701C1.33325 9.93269 1.53413 10.4177 1.8917 10.7752C2.24927 11.1328 2.73424 11.3337 3.23992 11.3337H4.02659V9.54701C4.02571 9.29694 4.07421 9.04915 4.1693 8.81786C4.26439 8.58657 4.4042 8.37633 4.58072 8.19919C4.75724 8.02206 4.96699 7.88151 5.19794 7.78561C5.4289 7.6897 5.67651 7.64034 5.92659 7.64034H9.42659C10.4799 7.64034 11.3333 6.79301 11.3333 5.73967V3.23967C11.3333 2.734 11.1324 2.24903 10.7748 1.89146C10.4172 1.53389 9.93227 1.33301 9.42659 1.33301H6.57325ZM6.09325 2.40634C6.35992 2.40634 6.57325 2.48634 6.57325 2.87967C6.57325 3.27301 6.35992 3.47367 6.09325 3.47367C5.83325 3.47367 5.61992 3.27367 5.61992 2.88034C5.61992 2.48701 5.83325 2.40634 6.09325 2.40634Z"
      fill="#3B3C45"
    />
    <path
      d="M11.9727 4.66699V6.45366C11.9735 6.70367 11.925 6.95139 11.8298 7.1826C11.7347 7.41381 11.5949 7.62397 11.4184 7.80104C11.2419 7.97811 11.0321 8.1186 10.8012 8.21446C10.5703 8.31032 10.3228 8.35966 10.0727 8.35966H6.57341C6.32334 8.35878 6.07556 8.40728 5.84427 8.50237C5.61298 8.59746 5.40274 8.73727 5.2256 8.91379C5.04846 9.09031 4.90791 9.30006 4.81201 9.53102C4.71611 9.76197 4.66675 10.0096 4.66675 10.2597V12.7597C4.66675 13.2653 4.86763 13.7503 5.2252 14.1079C5.58277 14.4654 6.06774 14.6663 6.57341 14.6663H9.42675C9.93231 14.6663 10.4172 14.4655 10.7747 14.1081C11.1323 13.7507 11.3332 13.2659 11.3334 12.7603V11.6403H8.47275C8.21275 11.6403 8.00008 11.2603 8.00008 11.0003H12.7601C13.2658 11.0003 13.7507 10.7994 14.1083 10.4419C14.4659 10.0843 14.6667 9.59934 14.6667 9.09366V6.57366C14.6667 6.06798 14.4659 5.58301 14.1083 5.22544C13.7507 4.86787 13.2658 4.66699 12.7601 4.66699H11.9727ZM5.54675 7.67566L5.54408 7.67833L5.56941 7.67566H5.54675ZM9.90675 12.5263C10.1667 12.5263 10.3801 12.7263 10.3801 13.1197C10.3801 13.1818 10.3678 13.2434 10.3441 13.3008C10.3203 13.3582 10.2854 13.4104 10.2414 13.4544C10.1975 13.4983 10.1453 13.5332 10.0879 13.557C10.0305 13.5807 9.96891 13.593 9.90675 13.593C9.64008 13.593 9.42675 13.513 9.42675 13.1197C9.42675 12.7263 9.64008 12.5263 9.90675 12.5263Z"
      fill="#3B3C45"
    />
  </svg>
);

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

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