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 transform="translate(2.15065 3.876255)">
      <path
        d="M8.43781 0.000244141H6.64874L9.90967 8.24774H11.6987L8.43781 0.000244141ZM3.26092 0.000244141L-7.62939e-06 8.24774H1.82713L2.49962 6.52211H5.91281L6.57261 8.24774H8.39975L5.13881 0.000244141H3.26092ZM3.08329 4.9868L4.19987 2.09384L5.31645 4.9868H3.08329Z"
        fill="currentColor"
      />
    </g>
  </svg>
);

export const AnthropicIcon = styled(Icon).attrs(() => ({
  'data-component-name': 'icons/AnthropicIcon/AnthropicIcon',
}))<IconProps>`
  color: ${({ color }) => getCssColorVariable(color)};
  height: ${({ size }) => size || '16px'};
  width: ${({ size }) => size || '16px'};
`;