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="M5.50001 8.99979L6.20501 9.70479L7.50001 8.41479V14.4998H8.50001V8.41479L9.79501 9.70479L10.5 8.99979L8.00001 6.49979L5.50001 8.99979Z" />
    <path d="M11.75 10.9998H11.5V9.99979H11.75C12.3467 10.0237 12.9285 9.80949 13.3674 9.40442C13.8062 8.99934 14.0661 8.43652 14.09 7.83979C14.1139 7.24305 13.8997 6.66127 13.4946 6.22243C13.0896 5.7836 12.5267 5.52365 11.93 5.49979H11.5L11.45 5.08979C11.3391 4.24801 10.9259 3.47526 10.2876 2.91548C9.64916 2.3557 8.82906 2.04706 7.98001 2.04706C7.13095 2.04706 6.31085 2.3557 5.67246 2.91548C5.03407 3.47526 4.62093 4.24801 4.51001 5.08979L4.50001 5.49979H4.07001C3.47327 5.52365 2.91045 5.7836 2.50538 6.22243C2.1003 6.66127 1.88614 7.24305 1.91001 7.83979C1.93387 8.43652 2.19382 8.99934 2.63265 9.40442C3.07149 9.80949 3.65327 10.0237 4.25001 9.99979H4.50001V10.9998H4.25001C3.44821 10.9947 2.67659 10.6934 2.0835 10.1538C1.49041 9.61425 1.11771 8.87447 1.03707 8.07672C0.956428 7.27898 1.17353 6.47957 1.64663 5.83221C2.11974 5.18485 2.81545 4.73523 3.60001 4.56979C3.81586 3.56305 4.37042 2.66077 5.17116 2.01352C5.9719 1.36627 6.97038 1.01318 8.00001 1.01318C9.02963 1.01318 10.0281 1.36627 10.8288 2.01352C11.6296 2.66077 12.1842 3.56305 12.4 4.56979C13.1846 4.73523 13.8803 5.18485 14.3534 5.83221C14.8265 6.47957 15.0436 7.27898 14.9629 8.07672C14.8823 8.87447 14.5096 9.61425 13.9165 10.1538C13.3234 10.6934 12.5518 10.9947 11.75 10.9998Z" />
  </svg>
);

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

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