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}>
    <path d="M4.03188 9.88255L6.60172 8.62367L6.64494 8.51434L6.60172 8.45352H6.47649L6.04701 8.43042L4.57865 8.39577L3.3052 8.34957L2.07142 8.29182L1.761 8.23408L1.46997 7.89915L1.49996 7.73207L1.761 7.57884L2.13492 7.60733L2.96126 7.65661L4.2012 7.7313L5.10074 7.77749L6.43328 7.89838H6.64494L6.67492 7.82369L6.60261 7.77749L6.54616 7.7313L5.26301 6.97212L3.87402 6.16983L3.14646 5.70785L2.75313 5.47379L2.5547 5.25435L2.46916 4.77544L2.82633 4.43204L3.30608 4.46052L3.42866 4.48901L3.91459 4.81548L4.95258 5.5169L6.30805 6.38849L6.50648 6.53248L6.58585 6.4832L6.59555 6.44855L6.50648 6.31843L5.76921 5.15503L4.98256 3.9716L4.63245 3.48114L4.53985 3.18702C4.50722 3.06614 4.48341 2.9645 4.48341 2.84054L4.88996 2.35855L5.11485 2.29541L5.65721 2.35855L5.88562 2.53179L6.22251 3.20473L6.7684 4.26419L7.61502 5.70477L7.86284 6.1321L7.99512 6.52786L8.04451 6.64874H8.13005V6.57944L8.19972 5.76791L8.32848 4.77159L8.45371 3.48961L8.49692 3.1285L8.70152 2.69579L9.10807 2.46172L9.42556 2.59415L9.6866 2.92061L9.65044 3.13158L9.49523 4.01241L9.19097 5.39217L8.99254 6.31612H9.10807L9.24036 6.20062L9.77567 5.58004L10.6752 4.59835L11.0721 4.20875L11.5351 3.77834L11.8323 3.57354H12.394L12.8076 4.1102L12.6224 4.66456L12.0439 5.30517L11.5642 5.84799L10.8763 6.65644L10.4468 7.3032L10.4865 7.35479L10.5888 7.34632L12.1427 7.05759L12.9822 6.92515L13.9841 6.77501L14.4374 6.9598L14.4868 7.14767L14.3086 7.53188L13.2371 7.76287L11.9804 7.9823L10.109 8.36882L10.0861 8.38345L10.1126 8.41194L10.9556 8.48123L11.3163 8.49817H12.1991L13.843 8.6052L14.2725 8.85312L14.53 9.15649L14.4868 9.38747L13.8253 9.68159L12.9329 9.4968L10.8498 9.06409L10.1355 8.90856H10.0367V8.96014L10.632 9.46832L11.7229 10.3284L13.089 11.4371L13.1586 11.7112L12.9831 11.9276L12.7979 11.9045L11.5977 11.116L11.1347 10.7611L10.0861 9.99035H10.0164V10.0712L10.2581 10.3799L11.5342 12.0546L11.6003 12.5682L11.5077 12.7352L11.177 12.8361L10.8137 12.7784L10.0667 11.8629L9.29592 10.8319L8.67418 9.90796L8.59834 9.94569L8.23147 13.3959L8.0595 13.5722L7.66264 13.7046L7.33193 13.4852L7.15644 13.1302L7.33193 12.4288L7.54359 11.5133L7.71556 10.7857L7.87077 9.88178L7.96337 9.5815L7.9572 9.56148L7.88136 9.56995L7.10088 10.5054L5.91385 11.906L4.97463 12.7837L4.74974 12.8615L4.35994 12.6852L4.3961 12.3703L4.61393 12.09L5.91385 10.6463L6.69785 9.75166L7.20406 9.23502L7.20053 9.16033H7.17055L3.71792 11.1176L3.10324 11.1869L2.83867 10.9705L2.8713 10.6155L2.99653 10.5001L4.03452 9.87639L4.031 9.87947L4.03188 9.88255Z" />
  </svg>
);

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

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