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="M3.0625 13.125C2.62985 13.125 2.20692 12.9967 1.84719 12.7563C1.48746 12.516 1.20708 12.1743 1.04151 11.7746C0.875948 11.3749 0.832628 10.9351 0.917033 10.5107C1.00144 10.0864 1.20978 9.69663 1.5157 9.3907C1.82163 9.08478 2.21141 8.87644 2.63574 8.79203C3.06007 8.70763 3.49991 8.75095 3.89962 8.91651C4.29933 9.08208 4.64097 9.36246 4.88134 9.72219C5.12171 10.0819 5.25 10.5049 5.25 10.9375C5.24932 11.5175 5.01863 12.0735 4.60854 12.4835C4.19845 12.8936 3.64245 13.1243 3.0625 13.125ZM3.0625 9.625C2.80291 9.625 2.54915 9.70198 2.33331 9.8462C2.11748 9.99042 1.94925 10.1954 1.84991 10.4352C1.75057 10.6751 1.72458 10.939 1.77522 11.1936C1.82586 11.4482 1.95087 11.682 2.13442 11.8656C2.31798 12.0491 2.55184 12.1741 2.80645 12.2248C3.06105 12.2754 3.32494 12.2494 3.56477 12.1501C3.8046 12.0508 4.00959 11.8825 4.1538 11.6667C4.29802 11.4508 4.375 11.1971 4.375 10.9375C4.37462 10.5895 4.23622 10.2559 3.99016 10.0098C3.7441 9.76379 3.41048 9.62538 3.0625 9.625Z"
      fill="#3B3C45"
    />
    <path
      d="M10.5 11.375H6.125V10.5H10.5V7.4375H3.5C3.26801 7.43726 3.04559 7.34499 2.88155 7.18095C2.71751 7.01691 2.62524 6.79449 2.625 6.5625V3.5C2.62524 3.26801 2.71751 3.04559 2.88155 2.88155C3.04559 2.71751 3.26801 2.62524 3.5 2.625H7.875V3.5H3.5V6.5625H10.5C10.732 6.56274 10.9544 6.65501 11.1185 6.81905C11.2825 6.98309 11.3748 7.20551 11.375 7.4375V10.5C11.3748 10.732 11.2825 10.9544 11.1185 11.1184C10.9544 11.2825 10.732 11.3748 10.5 11.375Z"
      fill="#3B3C45"
    />
    <path
      d="M12.25 5.25H9.625C9.39302 5.24973 9.17061 5.15746 9.00658 4.99342C8.84254 4.82939 8.75027 4.60698 8.75 4.375V1.75C8.75027 1.51802 8.84254 1.29561 9.00658 1.13158C9.17061 0.967539 9.39302 0.875266 9.625 0.875H12.25C12.482 0.875266 12.7044 0.967539 12.8684 1.13158C13.0325 1.29561 13.1247 1.51802 13.125 1.75V4.375C13.1247 4.60698 13.0325 4.82939 12.8684 4.99342C12.7044 5.15746 12.482 5.24973 12.25 5.25ZM9.625 1.75V4.375H12.25V1.75H9.625Z"
      fill="#3B3C45"
    />
  </svg>
);

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

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