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="M11.5 10.0001C11.1257 10.002 10.7566 10.0879 10.42 10.2514C10.0834 10.415 9.78776 10.652 9.55497 10.9451L5.89997 8.6601C6.03318 8.23018 6.03318 7.77002 5.89997 7.3401L9.55497 5.0551C9.92594 5.51446 10.4475 5.82769 11.0273 5.93931C11.6071 6.05092 12.2077 5.95372 12.7227 5.66491C13.2377 5.37611 13.6339 4.91435 13.841 4.36143C14.0482 3.8085 14.0529 3.20011 13.8544 2.64402C13.656 2.08793 13.2671 1.62003 12.7567 1.32322C12.2462 1.0264 11.6472 0.919827 11.0657 1.02237C10.4843 1.12491 9.95785 1.42996 9.57975 1.88346C9.20164 2.33697 8.99626 2.90966 8.99997 3.5001C9.00233 3.72369 9.03599 3.94585 9.09997 4.1601L5.44497 6.4451C5.12229 6.03889 4.68124 5.74313 4.18295 5.5988C3.68465 5.45447 3.1538 5.46873 2.66398 5.63961C2.17415 5.81048 1.74961 6.1295 1.44921 6.55245C1.14881 6.9754 0.987427 7.48133 0.987427 8.0001C0.987427 8.51888 1.14881 9.0248 1.44921 9.44775C1.74961 9.8707 2.17415 10.1897 2.66398 10.3606C3.1538 10.5315 3.68465 10.5457 4.18295 10.4014C4.68124 10.2571 5.12229 9.96131 5.44497 9.5551L9.09997 11.8401C9.03599 12.0544 9.00233 12.2765 8.99997 12.5001C8.99997 12.9946 9.14659 13.4779 9.4213 13.889C9.696 14.3002 10.0864 14.6206 10.5433 14.8098C11.0001 14.999 11.5027 15.0485 11.9877 14.9521C12.4726 14.8556 12.9181 14.6175 13.2677 14.2679C13.6174 13.9182 13.8555 13.4728 13.9519 12.9878C14.0484 12.5029 13.9989 12.0002 13.8097 11.5434C13.6204 11.0866 13.3 10.6961 12.8889 10.4214C12.4778 10.1467 11.9944 10.0001 11.5 10.0001ZM11.5 2.0001C11.7966 2.0001 12.0867 2.08808 12.3333 2.2529C12.58 2.41772 12.7723 2.65199 12.8858 2.92608C12.9993 3.20017 13.029 3.50177 12.9711 3.79274C12.9133 4.08371 12.7704 4.35098 12.5606 4.56076C12.3509 4.77054 12.0836 4.9134 11.7926 4.97128C11.5016 5.02916 11.2 4.99945 10.9259 4.88592C10.6519 4.77239 10.4176 4.58013 10.2528 4.33346C10.0879 4.08678 9.99997 3.79677 9.99997 3.5001C9.99997 3.10228 10.158 2.72075 10.4393 2.43944C10.7206 2.15814 11.1021 2.0001 11.5 2.0001ZM3.49997 9.5001C3.2033 9.5001 2.91329 9.41213 2.66661 9.24731C2.41994 9.08248 2.22768 8.84822 2.11415 8.57413C2.00062 8.30004 1.97091 7.99844 2.02879 7.70747C2.08667 7.4165 2.22953 7.14922 2.43931 6.93944C2.64909 6.72966 2.91636 6.5868 3.20733 6.52892C3.49831 6.47105 3.79991 6.50075 4.074 6.61428C4.34808 6.72781 4.58235 6.92007 4.74717 7.16675C4.912 7.41342 4.99997 7.70343 4.99997 8.0001C4.99997 8.39793 4.84193 8.77946 4.56063 9.06076C4.27933 9.34207 3.89779 9.5001 3.49997 9.5001ZM11.5 14.0001C11.2033 14.0001 10.9133 13.9121 10.6666 13.7473C10.4199 13.5825 10.2277 13.3482 10.1142 13.0741C10.0006 12.8 9.97091 12.4984 10.0288 12.2075C10.0867 11.9165 10.2295 11.6492 10.4393 11.4394C10.6491 11.2297 10.9164 11.0868 11.2073 11.0289C11.4983 10.971 11.7999 11.0008 12.074 11.1143C12.3481 11.2278 12.5824 11.4201 12.7472 11.6667C12.912 11.9134 13 12.2034 13 12.5001C13 12.8979 12.8419 13.2795 12.5606 13.5608C12.2793 13.8421 11.8978 14.0001 11.5 14.0001Z" />
  </svg>
);

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

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