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 13 13" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M3.5 5.25456C3.98325 5.25456 4.375 4.86281 4.375 4.37956C4.375 3.89631 3.98325 3.50456 3.5 3.50456C3.01675 3.50456 2.625 3.89631 2.625 4.37956C2.625 4.86281 3.01675 5.25456 3.5 5.25456Z" />
    <path d="M6.125 3.94206C6.60825 3.94206 7 3.55031 7 3.06706C7 2.58381 6.60825 2.19206 6.125 2.19206C5.64175 2.19206 5.25 2.58381 5.25 3.06706C5.25 3.55031 5.64175 3.94206 6.125 3.94206Z" />
    <path d="M8.75 5.25456C9.23325 5.25456 9.625 4.86281 9.625 4.37956C9.625 3.89631 9.23325 3.50456 8.75 3.50456C8.26675 3.50456 7.875 3.89631 7.875 4.37956C7.875 4.86281 8.26675 5.25456 8.75 5.25456Z" />
    <path d="M9.1875 7.87956C9.67075 7.87956 10.0625 7.48781 10.0625 7.00456C10.0625 6.52131 9.67075 6.12956 9.1875 6.12956C8.70425 6.12956 8.3125 6.52131 8.3125 7.00456C8.3125 7.48781 8.70425 7.87956 9.1875 7.87956Z" />
    <path d="M7.4375 10.0671C7.92075 10.0671 8.3125 9.67531 8.3125 9.19206C8.3125 8.70881 7.92075 8.31706 7.4375 8.31706C6.95425 8.31706 6.5625 8.70881 6.5625 9.19206C6.5625 9.67531 6.95425 10.0671 7.4375 10.0671Z" />
    <path d="M6.36125 0.00455826C5.53725 -0.0272487 4.7153 0.107661 3.9447 0.401198C3.17409 0.694735 2.4707 1.14086 1.87668 1.71281C1.28266 2.28477 0.810249 2.97079 0.487771 3.72974C0.165293 4.48869 -0.000611956 5.30494 1.69613e-06 6.12956C-2.00107e-05 6.45389 0.074769 6.77385 0.218553 7.06457C0.362337 7.35528 0.57124 7.60891 0.829017 7.80574C1.08679 8.00256 1.3865 8.13728 1.70482 8.1994C2.02315 8.26153 2.35151 8.24939 2.66438 8.16393L3.15438 8.02831C3.3493 7.9751 3.55388 7.96761 3.75217 8.00643C3.95047 8.04526 4.13712 8.12934 4.29759 8.25212C4.45806 8.37491 4.58801 8.53309 4.67733 8.71433C4.76664 8.89558 4.8129 9.095 4.8125 9.29706V10.9421C4.8125 11.2902 4.95078 11.624 5.19692 11.8701C5.44307 12.1163 5.77691 12.2546 6.125 12.2546C6.94962 12.2552 7.76587 12.0893 8.52482 11.7668C9.28377 11.4443 9.96979 10.9719 10.5417 10.3779C11.1137 9.78386 11.5598 9.08046 11.8534 8.30986C12.1469 7.53926 12.2818 6.71731 12.25 5.89331C12.1865 4.35185 11.5457 2.89063 10.4548 1.79973C9.36393 0.708834 7.90271 0.0680368 6.36125 0.00455826ZM9.90938 9.76518C9.42087 10.2766 8.83352 10.6835 8.18297 10.961C7.53243 11.2385 6.83227 11.3809 6.125 11.3796C6.00897 11.3796 5.89769 11.3335 5.81564 11.2514C5.7336 11.1694 5.6875 11.0581 5.6875 10.9421V9.29706C5.6875 8.7169 5.45703 8.1605 5.0468 7.75026C4.63656 7.34003 4.08016 7.10956 3.5 7.10956C3.30341 7.10991 3.10774 7.13639 2.91813 7.18831L2.42813 7.32393C2.24511 7.37298 2.05326 7.37922 1.86744 7.34216C1.68163 7.3051 1.50685 7.22574 1.35665 7.11024C1.20645 6.99474 1.08488 6.84619 1.00135 6.67612C0.917824 6.50605 0.87459 6.31903 0.875002 6.12956C0.874459 5.42247 1.01676 4.72256 1.29336 4.07181C1.56996 3.42107 1.97517 2.83291 2.48466 2.34261C2.99416 1.85232 3.59745 1.47 4.25833 1.21859C4.91922 0.967181 5.62408 0.851864 6.33063 0.879558C7.64627 0.948081 8.8899 1.50154 9.82146 2.4331C10.753 3.36466 11.3065 4.60829 11.375 5.92393C11.4051 6.63092 11.2907 7.33662 11.0387 7.99785C10.7867 8.65908 10.4024 9.26195 9.90938 9.76956V9.76518Z" />
  </svg>
);

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

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