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
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <g clipPath="url(#clip0_15358_36168)">
      <path
        d="M13.1 6.8695H9.555C9.2715 6.8355 9.0555 6.586 9.0555 6.292V2.572C9.056 2.255 8.7985 2 8.484 2H7.2435C6.926 2 6.671 2.2575 6.671 2.5725V6.3315C6.6555 6.6155 6.4215 6.8435 6.1405 6.8695H5.212C4.939 6.836 4.728 6.607 4.71 6.33V2.5725C4.71 2.255 4.4525 2 4.138 2H2.897C2.58 2 2.325 2.2575 2.325 2.5725V7.442V13.4275C2.325 13.745 2.5825 14 2.897 14H4.1375H7.2425H8.483H13.1025C13.42 14 13.675 13.7425 13.675 13.4275V7.442C13.673 7.125 13.4175 6.8695 13.1 6.8695ZM11.4665 10.9745C11.4665 11.292 11.209 11.5495 10.8945 11.5495H9.6545C9.3365 11.5495 9.081 11.292 9.081 10.9745V9.804C9.081 9.486 9.3385 9.2295 9.6545 9.2295H10.8945C11.2125 9.2295 11.4665 9.487 11.4665 9.804V10.9745Z"
        fill="#1A1C21"
      />
    </g>
    <defs>
      <clipPath id="clip0_15358_36168">
        <rect width="12" height="12" fill="white" transform="translate(2 2)" />
      </clipPath>
    </defs>
  </svg>
);

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

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