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" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M4.5 6.5H13.5C13.7651 6.4997 14.0193 6.39424 14.2068 6.20677C14.3942 6.0193 14.4997 5.76512 14.5 5.5V2.5C14.4997 2.23488 14.3942 1.9807 14.2068 1.79323C14.0193 1.60576 13.7651 1.5003 13.5 1.5H2.5C2.23488 1.5003 1.9807 1.60576 1.79323 1.79323C1.60576 1.9807 1.5003 2.23488 1.5 2.5V5.5C1.5003 5.76512 1.60576 6.0193 1.79323 6.20677C1.9807 6.39424 2.23488 6.4997 2.5 6.5H3.5H4.5ZM13.5 2.5H2.5V5.5H13.5V2.5Z"
    />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M13.5 9.5H8.5C8.23488 9.5003 7.9807 9.60576 7.79323 9.79323C7.60576 9.9807 7.5003 10.2349 7.5 10.5V11.5H4.5V9.29295V8.5V6.5H3.5V9.29295V11.5C3.5003 11.7651 3.60576 12.0193 3.79323 12.2068C3.9807 12.3942 4.23488 12.4997 4.5 12.5H7.5V13.5C7.5003 13.7651 7.60576 14.0193 7.79323 14.2068C7.9807 14.3942 8.23488 14.4997 8.5 14.5H13.5C13.7651 14.4997 14.0193 14.3942 14.2068 14.2068C14.3942 14.0193 14.4997 13.7651 14.5 13.5V10.5C14.4997 10.2349 14.3942 9.9807 14.2068 9.79323C14.0193 9.60576 13.7651 9.5003 13.5 9.5ZM8.5 10.5V13.5H13.5V10.5H8.5Z"
    />
  </svg>
);

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

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