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="M12.5 10.0699V7.4999C12.5 7.23468 12.3946 6.98033 12.2071 6.79279C12.0196 6.60526 11.7652 6.4999 11.5 6.4999H7.5V3.9299C7.97133 3.8082 8.3821 3.51879 8.65531 3.1159C8.92851 2.71301 9.0454 2.22431 8.98406 1.7414C8.92273 1.25849 8.68737 0.814533 8.32212 0.492739C7.95687 0.170944 7.48679 -0.0065918 7 -0.0065918C6.51322 -0.0065918 6.04314 0.170944 5.67789 0.492739C5.31264 0.814533 5.07728 1.25849 5.01595 1.7414C4.95461 2.22431 5.0715 2.71301 5.3447 3.1159C5.61791 3.51879 6.02868 3.8082 6.5 3.9299V6.4999H2.5C2.23479 6.4999 1.98043 6.60526 1.7929 6.79279C1.60536 6.98033 1.5 7.23468 1.5 7.4999V10.0699C1.02868 10.1916 0.61791 10.481 0.344704 10.8839C0.0714978 11.2868 -0.0453918 11.7755 0.0159455 12.2584C0.0772827 12.7413 0.312636 13.1853 0.677889 13.5071C1.04314 13.8289 1.51322 14.0064 2 14.0064C2.48679 14.0064 2.95687 13.8289 3.32212 13.5071C3.68737 13.1853 3.92273 12.7413 3.98406 12.2584C4.0454 11.7755 3.92851 11.2868 3.65531 10.8839C3.3821 10.481 2.97133 10.1916 2.5 10.0699V7.4999H11.5V10.0699C11.0287 10.1916 10.6179 10.481 10.3447 10.8839C10.0715 11.2868 9.95461 11.7755 10.0159 12.2584C10.0773 12.7413 10.3126 13.1853 10.6779 13.5071C11.0431 13.8289 11.5132 14.0064 12 14.0064C12.4868 14.0064 12.9569 13.8289 13.3221 13.5071C13.6874 13.1853 13.9227 12.7413 13.9841 12.2584C14.0454 11.7755 13.9285 11.2868 13.6553 10.8839C13.3821 10.481 12.9713 10.1916 12.5 10.0699ZM3 11.9999C3 12.1977 2.94136 12.391 2.83147 12.5555C2.72159 12.7199 2.56541 12.8481 2.38269 12.9238C2.19996 12.9995 1.9989 13.0193 1.80491 12.9807C1.61093 12.9421 1.43275 12.8469 1.2929 12.707C1.15305 12.5672 1.0578 12.389 1.01922 12.195C0.980634 12.001 1.00044 11.7999 1.07613 11.6172C1.15181 11.4345 1.27999 11.2783 1.44443 11.1684C1.60888 11.0585 1.80222 10.9999 2 10.9999C2.26522 10.9999 2.51958 11.1053 2.70711 11.2928C2.89465 11.4803 3 11.7347 3 11.9999ZM6 1.9999C6 1.80212 6.05865 1.60878 6.16854 1.44433C6.27842 1.27988 6.4346 1.15171 6.61732 1.07602C6.80005 1.00033 7.00111 0.980529 7.1951 1.01911C7.38908 1.0577 7.56726 1.15294 7.70711 1.29279C7.84696 1.43265 7.9422 1.61083 7.98079 1.80481C8.01938 1.99879 7.99957 2.19986 7.92388 2.38258C7.8482 2.56531 7.72002 2.72149 7.55558 2.83137C7.39113 2.94125 7.19779 2.9999 7 2.9999C6.73479 2.9999 6.48043 2.89454 6.2929 2.70701C6.10536 2.51947 6 2.26512 6 1.9999ZM12 12.9999C11.8022 12.9999 11.6089 12.9413 11.4444 12.8314C11.28 12.7215 11.1518 12.5653 11.0761 12.3826C11.0004 12.1999 10.9806 11.9988 11.0192 11.8048C11.0578 11.6108 11.153 11.4326 11.2929 11.2928C11.4328 11.1529 11.6109 11.0577 11.8049 11.0191C11.9989 10.9805 12.2 11.0003 12.3827 11.076C12.5654 11.1517 12.7216 11.2799 12.8315 11.4443C12.9414 11.6088 13 11.8021 13 11.9999C13 12.2651 12.8946 12.5195 12.7071 12.707C12.5196 12.8945 12.2652 12.9999 12 12.9999Z"
      fill="#1A1C21"
    />
  </svg>
);

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

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