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 10.5 12.25" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M7 3.5H6.125V4.375H7V3.5Z" fill="currentColor" />
    <path d="M4.375 3.5H3.5V4.375H4.375V3.5Z" fill="currentColor" />
    <path
      d="M9.625 7.875H7.4375V7H7.875C8.10698 6.99973 8.32939 6.90746 8.49342 6.74342C8.65746 6.57939 8.74973 6.35698 8.75 6.125V4.375H9.625V3.5H8.75V2.625C8.74973 2.39302 8.65746 2.17061 8.49342 2.00658C8.32939 1.84254 8.10698 1.75027 7.875 1.75H7V0H6.125V1.75H4.375V0H3.5V1.75H2.625C2.39302 1.75027 2.17061 1.84254 2.00658 2.00658C1.84254 2.17061 1.75027 2.39302 1.75 2.625V3.5H0.875V4.375H1.75V6.125C1.75027 6.35698 1.84254 6.57939 2.00658 6.74342C2.17061 6.90746 2.39302 6.99973 2.625 7H3.0625V7.875H0.875C0.643017 7.87527 0.420612 7.96754 0.256576 8.13158C0.092539 8.29561 0.000266321 8.51802 0 8.75V12.25H0.875V8.75H9.625V12.25H10.5V8.75C10.4997 8.51802 10.4075 8.29561 10.2434 8.13158C10.0794 7.96754 9.85698 7.87527 9.625 7.875ZM2.625 2.625H7.875V6.125H2.625V2.625ZM3.9375 7H6.5625V7.875H3.9375V7Z"
      fill="currentColor"
    />
  </svg>
);

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