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 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M4.14282 2C2.95936 2 1.99997 2.95939 1.99997 4.14286V6.61312C1.99997 7.03547 1.7628 7.42181 1.38676 7.61313C1.24248 7.68211 1.14282 7.82942 1.14282 8C1.14282 8.17057 1.24248 8.31791 1.38676 8.38683C1.7628 8.57814 1.99997 8.96454 1.99997 9.38686V11.8571C1.99997 13.0406 2.95936 14 4.14282 14C4.37951 14 4.57139 13.8081 4.57139 13.5714C4.57139 13.3348 4.37951 13.1429 4.14282 13.1429C3.43274 13.1429 2.85711 12.5672 2.85711 11.8571V9.38686C2.85711 8.85963 2.64758 8.3642 2.28997 8C2.64759 7.63581 2.85711 7.14037 2.85711 6.61312V4.14286C2.85711 3.43277 3.43274 2.85714 4.14282 2.85714C4.37951 2.85714 4.57139 2.66526 4.57139 2.42857C4.57139 2.19188 4.37951 2 4.14282 2ZM11.8571 2C13.0406 2 14 2.95939 14 4.14286V6.61312C14 7.03547 14.2371 7.42181 14.6132 7.61313C14.7574 7.68211 14.8571 7.82942 14.8571 8C14.8571 8.17057 14.7574 8.31791 14.6132 8.38683C14.2371 8.57814 14 8.96454 14 9.38686V11.8571C14 13.0406 13.0406 14 11.8571 14C11.6205 14 11.4285 13.8081 11.4285 13.5714C11.4285 13.3348 11.6205 13.1429 11.8571 13.1429C12.5672 13.1429 13.1428 12.5672 13.1428 11.8571V9.38686C13.1428 8.85963 13.3523 8.3642 13.71 8C13.3523 7.63581 13.1428 7.14037 13.1428 6.61312V4.14286C13.1428 3.43277 12.5672 2.85714 11.8571 2.85714C11.6205 2.85714 11.4285 2.66526 11.4285 2.42857C11.4285 2.19188 11.6205 2 11.8571 2Z" />
    <path d="M5.14282 10.4507C5.14011 10.3693 5.15893 10.2886 5.1974 10.2167C5.23586 10.1449 5.2926 10.0845 5.36188 10.0416C5.43116 9.99875 5.51053 9.97491 5.59197 9.97253C5.67341 9.97015 5.75404 9.98931 5.82571 10.0281C5.8925 10.0638 5.95238 10.1029 6.00651 10.1455C6.06063 10.187 6.10785 10.2261 6.15046 10.2618C6.1872 10.2958 6.23516 10.3151 6.28519 10.316C6.34507 10.316 6.42338 10.2699 6.51896 10.1812C6.61454 10.0914 6.72049 9.97164 6.83334 9.82078C6.9485 9.67107 7.06481 9.51216 7.18458 9.34403C7.30434 9.17589 7.41489 9.00546 7.51854 8.83157L7.77879 8.38245C7.85019 8.25578 7.90201 8.15329 7.93195 8.07613C7.88445 7.87411 7.83339 7.67293 7.77879 7.4727C7.72422 7.27286 7.67316 7.07207 7.62563 6.87043C7.58427 6.70554 7.53312 6.54327 7.47247 6.38446C7.42248 6.25257 7.34957 6.13054 7.25713 6.02401C7.17471 5.92766 7.06937 5.85361 6.95081 5.80867C6.81131 5.76185 6.66596 5.73472 6.51896 5.72806C6.39217 5.72715 6.26562 5.73911 6.14124 5.76376V5.5392L7.79492 5.24209C8.02286 5.48841 8.2029 5.77506 8.3258 6.08735C8.38568 6.23706 8.4375 6.39022 8.47896 6.54683C8.52156 6.7023 8.56648 6.87273 8.61369 7.05929C8.70351 6.92685 8.81522 6.75988 8.94765 6.55489C9.08551 6.34321 9.2387 6.14191 9.40598 5.95262C9.57872 5.75454 9.76297 5.58987 9.95413 5.45743C10.1314 5.33112 10.3403 5.25657 10.5576 5.24209C10.7073 5.24209 10.842 5.28124 10.9618 5.3584C11.0827 5.43671 11.1426 5.55993 11.1426 5.72691C11.1426 6.05165 10.9802 6.21402 10.6566 6.21402C10.5403 6.21531 10.4255 6.1876 10.3226 6.13341C10.2205 6.0792 10.1066 6.05111 9.99098 6.05165C9.87583 6.05165 9.75721 6.10923 9.63054 6.22209C9.49724 6.34457 9.37684 6.4804 9.27124 6.62744C9.07212 6.90042 8.88575 7.18248 8.71273 7.4727L9.22633 9.60543C9.24678 9.74114 9.28272 9.87406 9.33343 10.0016C9.35969 10.0722 9.39617 10.1385 9.44168 10.1985C9.45808 10.2228 9.47933 10.2434 9.50411 10.2591C9.52889 10.2747 9.55665 10.2851 9.58563 10.2895C9.67502 10.2828 9.76005 10.2482 9.82861 10.1904C10.0197 10.0357 10.1867 9.8533 10.3238 9.64919C10.3837 9.56052 10.4309 9.47646 10.4677 9.39815L10.6831 9.5064C10.6142 9.65578 10.5296 9.79744 10.4309 9.92903C10.3081 10.1006 10.173 10.263 10.0267 10.415C9.8822 10.5655 9.72585 10.7041 9.55914 10.8296C9.39677 10.9493 9.24936 11.0058 9.11808 11C8.99903 11.0045 8.88293 10.9624 8.79449 10.8825C8.70702 10.8011 8.62828 10.7108 8.55957 10.6131C8.49245 10.4815 8.44142 10.3423 8.40756 10.1985C8.35614 10.0054 8.31082 9.81064 8.27167 9.61465C8.23128 9.41074 8.19251 9.20652 8.15536 9.00201C8.12866 8.83936 8.08624 8.6797 8.02869 8.52525L7.79492 8.95709C7.69785 9.13721 7.59018 9.31141 7.47247 9.47876C7.3458 9.65956 7.21682 9.84266 7.08439 10.0281C6.95957 10.2061 6.81467 10.3692 6.65255 10.514C6.49708 10.6522 6.34738 10.7685 6.20343 10.8653C6.06911 10.9583 5.90839 11.0055 5.7451 11C5.5928 11.0015 5.44525 10.947 5.33053 10.8468C5.27243 10.7983 5.22556 10.7378 5.19315 10.6694C5.16074 10.601 5.14357 10.5264 5.14282 10.4507Z" />
  </svg>
);

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

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