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="M6.74887 6.55188V5.54033C6.74887 5.45514 6.78085 5.39123 6.85535 5.34869L8.88914 4.17742C9.16598 4.01771 9.49608 3.94322 9.83676 3.94322C11.1145 3.94322 11.9238 4.93348 11.9238 5.98758C11.9238 6.06209 11.9238 6.14729 11.9131 6.23248L9.80481 4.99731C9.67705 4.92281 9.54923 4.92281 9.42147 4.99731L6.74887 6.55188ZM11.4978 10.4916V8.0745C11.4978 7.9254 11.4339 7.81892 11.3061 7.7444L8.63354 6.18983L9.50666 5.68935C9.58118 5.64681 9.64509 5.64681 9.71961 5.68935L11.7534 6.86061C12.3391 7.20138 12.733 7.9254 12.733 8.62811C12.733 9.43732 12.2539 10.1827 11.4978 10.4915V10.4916ZM6.12066 8.36206L5.24754 7.85099C5.17304 7.80845 5.14106 7.74451 5.14106 7.65932V5.31682C5.14106 4.17753 6.01418 3.315 7.19612 3.315C7.64339 3.315 8.05856 3.4641 8.41003 3.73029L6.31241 4.94418C6.18468 5.01868 6.12077 5.12515 6.12077 5.27428V8.36214L6.12066 8.36206ZM8.00002 9.4481L6.74887 8.74537V7.25473L8.00002 6.55199L9.25109 7.25473V8.74537L8.00002 9.4481ZM8.80393 12.6851C8.35668 12.6851 7.9415 12.536 7.59004 12.2698L9.68764 11.0559C9.81539 10.9814 9.8793 10.8749 9.8793 10.7258V7.63795L10.7631 8.14902C10.8376 8.19156 10.8696 8.25547 10.8696 8.34069V10.6832C10.8696 11.8225 9.98578 12.685 8.80393 12.685V12.6851ZM6.28037 10.3106L4.24657 9.1394C3.66089 8.7986 3.26698 8.07461 3.26698 7.37188C3.26698 6.55199 3.75678 5.8173 4.51273 5.50849V7.93618C4.51273 8.08528 4.57667 8.19176 4.7044 8.26628L7.36642 9.81016L6.49329 10.3106C6.4188 10.3532 6.35486 10.3532 6.28037 10.3106ZM6.16331 12.0569C4.96009 12.0569 4.0763 11.1518 4.0763 10.0338C4.0763 9.94859 4.08697 9.86339 4.09756 9.7782L6.19518 10.9921C6.32291 11.0666 6.45075 11.0666 6.57849 10.9921L9.25109 9.44821V10.4598C9.25109 10.545 9.21913 10.6089 9.14461 10.6514L7.11084 11.8227C6.83398 11.9824 6.50388 12.0569 6.1632 12.0569H6.16331ZM8.80393 13.3239C10.0923 13.3239 11.1677 12.4082 11.4127 11.1943C12.6052 10.8855 13.3719 9.7675 13.3719 8.62822C13.3719 7.88283 13.0525 7.15884 12.4775 6.63707C12.5307 6.41345 12.5627 6.18983 12.5627 5.96632C12.5627 4.4437 11.3275 3.3043 9.90067 3.3043C9.61325 3.3043 9.33639 3.34684 9.05953 3.44273C8.58031 2.97421 7.92013 2.67609 7.19612 2.67609C5.90773 2.67609 4.83236 3.59175 4.58736 4.80564C3.39482 5.11446 2.62817 6.23248 2.62817 7.37176C2.62817 8.11715 2.94757 8.84115 3.52258 9.36291C3.46934 9.58653 3.43738 9.81016 3.43738 10.0337C3.43738 11.5563 4.67256 12.6957 6.09937 12.6957C6.38682 12.6957 6.66368 12.6531 6.94054 12.5573C7.41965 13.0258 8.07982 13.3239 8.80393 13.3239Z" />
  </svg>
);

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

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