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
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M13.0094 7.61066L3.38435 2.79816C3.30892 2.76043 3.22418 2.74532 3.14035 2.75463C3.05652 2.76394 2.97717 2.79729 2.91186 2.85066C2.84948 2.90294 2.80292 2.97158 2.77742 3.04886C2.75191 3.12615 2.74847 3.20902 2.76748 3.28816L3.92685 7.56253H8.87498V8.43753H3.92685L2.74998 12.6988C2.73214 12.7649 2.73006 12.8342 2.7439 12.9013C2.75774 12.9683 2.78712 13.0312 2.82968 13.0848C2.87223 13.1384 2.92677 13.1813 2.98891 13.21C3.05106 13.2387 3.11907 13.2524 3.18748 13.25C3.25597 13.2496 3.3234 13.2331 3.38435 13.2019L13.0094 8.38941C13.081 8.35269 13.1412 8.29692 13.1832 8.22821C13.2252 8.15951 13.2474 8.08055 13.2474 8.00003C13.2474 7.91951 13.2252 7.84056 13.1832 7.77185C13.1412 7.70315 13.081 7.64737 13.0094 7.61066Z"
      fill="white"
    />
  </svg>
);

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

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