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}>
    <g clipPath="url(#clip0_8551_41)">
      <path
        d="M6.7631 1.83344C6.59429 1.66741 6.35877 1.56488 6.09695 1.56488C5.83611 1.56488 5.60241 1.66741 5.43559 1.83344H5.43079C5.26247 1.99867 5.1577 2.22933 5.1577 2.48462C5.1577 2.74087 5.26247 2.96959 5.43079 3.13385L5.43559 3.13757C5.60241 3.30279 5.83611 3.40436 6.09695 3.40436C6.35877 3.40436 6.59429 3.30279 6.7631 3.13757L6.76559 3.13385C6.93473 2.96959 7.03851 2.74087 7.03851 2.48462C7.03851 2.22933 6.93473 1.99867 6.76559 1.83344H6.7631ZM6.09695 14.4233C6.35877 14.4233 6.59429 14.3189 6.7631 14.1557L6.76559 14.1508C6.93473 13.9878 7.03851 13.7572 7.03851 13.5037C7.03851 13.2474 6.93473 13.0177 6.76559 12.8517H6.7631C6.59429 12.6837 6.35877 12.5822 6.09695 12.5822C5.83611 12.5822 5.60241 12.6837 5.43559 12.8517H5.43079C5.26247 13.0177 5.1577 13.2474 5.1577 13.5037C5.1577 13.7572 5.26247 13.9878 5.43079 14.1508L5.43559 14.1557C5.60241 14.3189 5.83611 14.4233 6.09695 14.4233ZM11.217 11.6368C11.4499 11.5771 11.6607 11.4308 11.7893 11.2097L11.8067 11.1774C11.9211 10.9677 11.9419 10.7257 11.8809 10.5112C11.8193 10.2815 11.668 10.0784 11.4426 9.95123L11.4295 9.94264C11.2099 9.82488 10.9597 9.79929 10.7298 9.86003C10.4961 9.91705 10.2862 10.0698 10.1583 10.2891C10.0287 10.5063 10.0015 10.7569 10.0636 10.9876C10.1277 11.2144 10.2774 11.4194 10.5014 11.5476H10.5029C10.7273 11.6738 10.9815 11.6966 11.217 11.6368ZM7.06134 7.05157C6.81441 6.81054 6.47413 6.65957 6.09695 6.65957C5.72125 6.65957 5.3818 6.81054 5.13536 7.05157C4.89008 7.29179 4.73881 7.62402 4.73881 7.9922C4.73881 8.36136 4.89008 8.69456 5.13536 8.93754C5.3818 9.17663 5.72125 9.32662 6.09695 9.32662C6.47413 9.32662 6.81441 9.17663 7.06134 8.93754C7.30712 8.69456 7.45839 8.36136 7.45839 7.9922C7.45839 7.62402 7.30712 7.29179 7.06134 7.05157ZM6.51915 5.4839C7.06565 5.57201 7.55736 5.82827 7.93257 6.1984H7.93554C7.99513 6.2572 8.05338 6.32086 8.10717 6.38533L9.04542 5.85403C8.91931 5.48098 8.91352 5.09092 9.0148 4.72549C9.1487 4.23565 9.47309 3.79717 9.95934 3.52196L9.9754 3.51256C10.4564 3.24578 11.0032 3.1907 11.4969 3.32175C11.9967 3.45263 12.4477 3.77157 12.7284 4.24715V4.24813C13.0078 4.72079 13.0646 5.2636 12.9312 5.75149C12.7983 6.241 12.4724 6.68241 11.9866 6.95567L11.8585 7.02986H11.8454C11.3961 7.23947 10.9019 7.27187 10.4481 7.15508C10.0754 7.05821 9.73343 6.85508 9.46581 6.56562L8.52905 7.0953C8.63663 7.37424 8.69637 7.6752 8.69637 7.9922C8.69637 8.30823 8.63663 8.61292 8.52905 8.8938L9.46581 9.42154C9.73343 9.12835 10.0754 8.92895 10.4481 8.83209C10.9479 8.69829 11.5022 8.75531 11.9866 9.03149L12.0176 9.04574V9.04769C12.4856 9.32468 12.7997 9.75377 12.9312 10.2378C13.0646 10.7228 13.0078 11.2657 12.7284 11.7394L12.7115 11.7726L12.7095 11.7696C12.4288 12.2263 11.9866 12.5357 11.4984 12.6666C10.9974 12.7957 10.4433 12.7406 9.95934 12.4683V12.4644C9.47309 12.1892 9.1487 11.7497 9.0148 11.261C8.91352 10.8966 8.91931 10.5063 9.04542 10.1335L8.10717 9.60377C8.05338 9.66841 7.99513 9.72915 7.93554 9.78795L7.93257 9.7907C7.55736 10.1591 7.06565 10.4153 6.51915 10.5007V11.5618C6.90858 11.6415 7.25763 11.8323 7.53121 12.0999L7.53254 12.1028C7.89913 12.4597 8.12604 12.957 8.12604 13.5037C8.12604 14.0486 7.89913 14.5428 7.53254 14.9016L7.53121 14.9073C7.16214 15.2661 6.65553 15.4881 6.09695 15.4881C5.54134 15.4881 5.03407 15.2661 4.66599 14.9073H4.66466V14.9016C4.29757 14.5428 4.07017 14.0486 4.07017 13.5037C4.07017 12.957 4.29757 12.4597 4.66466 12.1028V12.0999H4.66599C4.93907 11.8323 5.28862 11.6415 5.67706 11.5618V10.5007C5.13006 10.4153 4.63984 10.1591 4.26513 9.7907L4.26116 9.78795C3.79278 9.32759 3.5 8.69456 3.5 7.9922C3.5 7.29179 3.79278 6.65876 4.26116 6.1984H4.26513C4.63984 5.82827 5.13006 5.57201 5.67706 5.4839V4.42744C5.28862 4.34483 4.93907 4.15418 4.66599 3.88836H4.66466V3.88545C4.29757 3.52487 4.07017 3.03131 4.07017 2.48462C4.07017 1.94068 4.29757 1.44242 4.66466 1.08363L4.66599 1.08184C5.03407 0.722079 5.54134 0.5 6.09695 0.5C6.65553 0.5 7.16214 0.722079 7.53121 1.08184V1.08363H7.53254C7.89913 1.44242 8.12604 1.94068 8.12604 2.48462C8.12604 3.03131 7.89913 3.52487 7.53254 3.88545L7.53121 3.88836C7.25763 4.15418 6.90858 4.34483 6.51915 4.42744V5.4839ZM11.7893 4.77959L11.7816 4.76825C11.652 4.5546 11.4454 4.41222 11.217 4.3505C10.9815 4.28976 10.7273 4.31551 10.5014 4.4417H10.5029C10.2774 4.56691 10.1267 4.77198 10.0636 5.00167C10.0015 5.22942 10.0287 5.48098 10.1583 5.70014L10.1626 5.70597C10.2925 5.92222 10.4991 6.06736 10.7298 6.12616C10.9616 6.18982 11.22 6.16325 11.4426 6.0361L11.4547 6.03043C11.6738 5.9023 11.8198 5.70014 11.8809 5.47807C11.9429 5.24934 11.9183 4.99876 11.7893 4.77959Z"
        fill="#1A1919"
      />
    </g>
    <defs>
      <clipPath id="clip0_8551_41">
        <rect width="9.5" height="15" fill="white" transform="translate(3.5 0.5)" />
      </clipPath>
    </defs>
  </svg>
);

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

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