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}
  >
    <path
      d="M3.6516 9.97873C3.65161 10.2904 3.5592 10.595 3.38606 10.8542C3.21292 11.1133 2.96682 11.3153 2.67889 11.4346C2.39095 11.5539 2.07412 11.5851 1.76845 11.5243C1.46278 11.4635 1.182 11.3134 0.961622 11.093C0.741246 10.8726 0.591169 10.5919 0.53037 10.2862C0.469572 9.98052 0.500782 9.66368 0.620054 9.37575C0.739327 9.08781 0.941305 8.84172 1.20044 8.66858C1.45959 8.49543 1.76425 8.40303 2.07591 8.40304H3.6516V9.97873Z"
      fill="#555761"
    />
    <path
      d="M4.4456 9.97873C4.44822 9.56254 4.61539 9.16429 4.91061 8.87092C5.20583 8.57756 5.60512 8.4129 6.02131 8.4129C6.43751 8.4129 6.8368 8.57756 7.13202 8.87092C7.42724 9.16429 7.59441 9.56254 7.59703 9.97873V13.9242C7.59834 14.1319 7.55855 14.3379 7.47995 14.5302C7.40135 14.7225 7.28549 14.8974 7.13904 15.0448C6.99259 15.1922 6.81844 15.3091 6.62662 15.3889C6.43479 15.4688 6.22908 15.5098 6.02131 15.5098C5.81355 15.5098 5.60783 15.4688 5.41601 15.3889C5.22418 15.3091 5.05004 15.1922 4.90359 15.0448C4.75714 14.8974 4.64128 14.7225 4.56268 14.5302C4.48408 14.3379 4.44429 14.1319 4.4456 13.9242V9.97873Z"
      fill="#555761"
    />
    <path
      d="M6.02135 3.65135C5.70969 3.65136 5.40502 3.55896 5.14588 3.38582C4.88674 3.21268 4.68476 2.96658 4.56549 2.67864C4.44622 2.39071 4.41501 2.07387 4.47581 1.7682C4.53661 1.46253 4.68668 1.18175 4.90706 0.961378C5.12744 0.741002 5.40821 0.590925 5.71389 0.530126C6.01956 0.469328 6.33639 0.500538 6.62433 0.61981C6.91226 0.739083 7.15836 0.94106 7.3315 1.2002C7.50464 1.45934 7.59705 1.764 7.59703 2.07566V3.65135H6.02135Z"
      fill="#555761"
    />
    <path
      d="M6.02135 4.44535C6.43753 4.44797 6.83578 4.61514 7.12915 4.91036C7.42252 5.20558 7.58717 5.60488 7.58717 6.02107C7.58717 6.43727 7.42252 6.83656 7.12915 7.13178C6.83578 7.427 6.43753 7.59417 6.02135 7.59679H2.07591C1.86815 7.5981 1.66218 7.55831 1.46985 7.47971C1.27753 7.4011 1.10265 7.28525 0.955275 7.1388C0.807901 6.99235 0.690943 6.8182 0.611133 6.62638C0.531322 6.43455 0.490234 6.22884 0.490234 6.02107C0.490234 5.8133 0.531322 5.60759 0.611133 5.41577C0.690943 5.22394 0.807901 5.04979 0.955275 4.90334C1.10265 4.7569 1.27753 4.64104 1.46985 4.56244C1.66218 4.48383 1.86815 4.44404 2.07591 4.44535H6.02135Z"
      fill="#555761"
    />
    <path
      d="M12.3487 6.0211C12.3487 5.70944 12.4411 5.40478 12.6143 5.14564C12.7874 4.8865 13.0335 4.68452 13.3214 4.56525C13.6094 4.44598 13.9262 4.41477 14.2319 4.47556C14.5375 4.53636 14.8183 4.68644 15.0387 4.90682C15.2591 5.12719 15.4091 5.40797 15.4699 5.71364C15.5307 6.01931 15.4995 6.33615 15.3803 6.62408C15.261 6.91201 15.059 7.15811 14.7999 7.33125C14.5407 7.50439 14.2361 7.5968 13.9244 7.59679H12.3487V6.0211Z"
      fill="#555761"
    />
    <path
      d="M11.5547 6.0211C11.5521 6.43729 11.3849 6.83554 11.0897 7.1289C10.7945 7.42227 10.3952 7.58693 9.979 7.58693C9.56281 7.58693 9.16351 7.42227 8.86829 7.1289C8.57307 6.83554 8.4059 6.43729 8.40328 6.0211V2.07566C8.40198 1.8679 8.44177 1.66193 8.52037 1.46961C8.59897 1.27729 8.71483 1.10241 8.86127 0.955031C9.00772 0.807656 9.18187 0.690699 9.3737 0.610888C9.56552 0.531078 9.77124 0.48999 9.979 0.48999C10.1868 0.48999 10.3925 0.531078 10.5843 0.610888C10.7761 0.690699 10.9503 0.807656 11.0967 0.955031C11.2432 1.10241 11.359 1.27729 11.4376 1.46961C11.5162 1.66193 11.556 1.8679 11.5547 2.07566V6.0211Z"
      fill="#555761"
    />
    <path
      d="M9.97897 12.3485C10.2906 12.3485 10.5953 12.4409 10.8544 12.614C11.1136 12.7872 11.3156 13.0333 11.4348 13.3212C11.5541 13.6091 11.5853 13.926 11.5245 14.2316C11.4637 14.5373 11.3136 14.8181 11.0933 15.0385C10.8729 15.2588 10.5921 15.4089 10.2864 15.4697C9.98076 15.5305 9.66392 15.4993 9.37599 15.38C9.08806 15.2607 8.84196 15.0588 8.66882 14.7996C8.49568 14.5405 8.40327 14.2358 8.40328 13.9242V12.3485H9.97897Z"
      fill="#555761"
    />
    <path
      d="M9.97897 11.5545C9.56278 11.5519 9.16453 11.3847 8.87117 11.0895C8.5778 10.7942 8.41315 10.395 8.41315 9.97876C8.41315 9.56256 8.5778 9.16327 8.87117 8.86805C9.16453 8.57283 9.56278 8.40566 9.97897 8.40304H13.9244C14.1322 8.40173 14.3381 8.44152 14.5305 8.52012C14.7228 8.59872 14.8977 8.71458 15.045 8.86103C15.1924 9.00748 15.3094 9.18163 15.3892 9.37345C15.469 9.56528 15.5101 9.77099 15.5101 9.97876C15.5101 10.1865 15.469 10.3922 15.3892 10.5841C15.3094 10.7759 15.1924 10.95 15.045 11.0965C14.8977 11.2429 14.7228 11.3588 14.5305 11.4374C14.3381 11.516 14.1322 11.5558 13.9244 11.5545H9.97897Z"
      fill="#555761"
    />
  </svg>
);

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

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