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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" {...props}>
    <path
      d="M7 11.8125C5.425 11.8125 3.89375 11.025 2.975 9.625H5.25V8.75H1.75V12.25H2.625V10.6312C3.71875 11.9437 5.29375 12.6875 7 12.6875V11.8125Z"
      fill="#1A1C21"
    />
    <path
      d="M13.5625 10.0625V9.1875H12.6438C12.6 8.925 12.4688 8.6625 12.3375 8.4L12.9938 7.74375L12.3812 7.13125L11.725 7.7875C11.5062 7.65625 11.2437 7.525 10.9375 7.48125V6.5625H10.0625V7.48125C9.8 7.525 9.5375 7.65625 9.275 7.7875L8.61875 7.13125L8.00625 7.74375L8.6625 8.4C8.53125 8.61875 8.4 8.88125 8.35625 9.1875H7.4375V10.0625H8.35625C8.4 10.325 8.53125 10.5875 8.6625 10.85L8.00625 11.5062L8.61875 12.1188L9.275 11.4625C9.49375 11.5938 9.75625 11.725 10.0625 11.7688V12.6875H10.9375V11.7688C11.2 11.725 11.4625 11.5938 11.725 11.4625L12.3812 12.1188L12.9938 11.5062L12.3375 10.85C12.4688 10.6312 12.6 10.3687 12.6438 10.0625H13.5625ZM10.5 10.9375C9.75625 10.9375 9.1875 10.3687 9.1875 9.625C9.1875 8.88125 9.75625 8.3125 10.5 8.3125C11.2437 8.3125 11.8125 8.88125 11.8125 9.625C11.8125 10.3687 11.2437 10.9375 10.5 10.9375Z"
      fill="#1A1C21"
    />
    <path
      d="M8.75 4.375H11.025C9.58125 2.14375 6.60625 1.53125 4.375 2.975C3.01875 3.85 2.1875 5.38125 2.1875 7H1.3125C1.3125 3.85 3.85 1.3125 7 1.3125C8.70625 1.3125 10.2812 2.05625 11.375 3.36875V1.75H12.25V5.25H8.75V4.375Z"
      fill="#1A1C21"
    />
  </svg>
);

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

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