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.74999 4.00001H10.05C10.1739 4.60703 10.5188 5.14642 11.0178 5.5136C11.5168 5.88079 12.1344 6.04962 12.7508 5.98735C13.3672 5.92508 13.9385 5.63615 14.354 5.17658C14.7694 4.71701 14.9995 4.11954 14.9995 3.50001C14.9995 2.88047 14.7694 2.283 14.354 1.82343C13.9385 1.36386 13.3672 1.07493 12.7508 1.01267C12.1344 0.950396 11.5168 1.11922 11.0178 1.48641C10.5188 1.85359 10.1739 2.39298 10.05 3.00001H4.74999C4.02065 3.00001 3.32117 3.28974 2.80545 3.80546C2.28972 4.32119 1.99999 5.02066 1.99999 5.75001C1.99999 6.47935 2.28972 7.17882 2.80545 7.69455C3.32117 8.21027 4.02065 8.50001 4.74999 8.50001H10.25C10.7141 8.50001 11.1592 8.68438 11.4874 9.01257C11.8156 9.34076 12 9.78588 12 10.25C12 10.7141 11.8156 11.1593 11.4874 11.4874C11.1592 11.8156 10.7141 12 10.25 12H5.94999C5.82609 11.393 5.4812 10.8536 4.9822 10.4864C4.4832 10.1192 3.86563 9.9504 3.24923 10.0127C2.63283 10.0749 2.06151 10.3639 1.64603 10.8234C1.23054 11.283 1.0005 11.8805 1.0005 12.5C1.0005 13.1195 1.23054 13.717 1.64603 14.1766C2.06151 14.6362 2.63283 14.9251 3.24923 14.9873C3.86563 15.0496 4.4832 14.8808 4.9822 14.5136C5.4812 14.1464 5.82609 13.607 5.94999 13H10.25C10.9793 13 11.6788 12.7103 12.1945 12.1945C12.7103 11.6788 13 10.9794 13 10.25C13 9.52066 12.7103 8.82119 12.1945 8.30546C11.6788 7.78974 10.9793 7.50001 10.25 7.50001H4.74999C4.28586 7.50001 3.84075 7.31563 3.51256 6.98744C3.18437 6.65925 2.99999 6.21413 2.99999 5.75001C2.99999 5.28588 3.18437 4.84076 3.51256 4.51257C3.84075 4.18438 4.28586 4.00001 4.74999 4.00001ZM12.5 2.00001C12.7967 2.00001 13.0867 2.08798 13.3333 2.2528C13.58 2.41762 13.7723 2.65189 13.8858 2.92598C13.9993 3.20007 14.029 3.50167 13.9712 3.79264C13.9133 4.08361 13.7704 4.35089 13.5607 4.56067C13.3509 4.77044 13.0836 4.91331 12.7926 4.97118C12.5017 5.02906 12.2001 4.99936 11.926 4.88582C11.6519 4.77229 11.4176 4.58003 11.2528 4.33336C11.088 4.08669 11 3.79668 11 3.50001C11 3.10218 11.158 2.72065 11.4393 2.43935C11.7206 2.15804 12.1022 2.00001 12.5 2.00001ZM3.49999 14C3.20332 14 2.91331 13.912 2.66664 13.7472C2.41996 13.5824 2.22771 13.3481 2.11417 13.074C2.00064 12.7999 1.97094 12.4983 2.02882 12.2074C2.08669 11.9164 2.22955 11.6491 2.43933 11.4393C2.64911 11.2296 2.91639 11.0867 3.20736 11.0288C3.49833 10.971 3.79993 11.0007 4.07402 11.1142C4.34811 11.2277 4.58238 11.42 4.7472 11.6667C4.91202 11.9133 4.99999 12.2033 4.99999 12.5C4.99999 12.8978 4.84196 13.2794 4.56065 13.5607C4.27935 13.842 3.89782 14 3.49999 14Z"
      fill="#1A1C21"
    />
  </svg>
);

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

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