import type * as React from 'react';
import { t } from '../i18n';
import { SvgIcon, IconCommonProps } from './SvgIcon';

const defaultProps = {
  className: '',
  viewBox: '0 0 32 32',
};

export function LinkIcon(props: IconCommonProps): React.ReactElement {
  const iconCssClasses = `ds-c-icon--link ${props.className || ''}`;

  return (
    <SvgIcon title={t('icons.link')} {...defaultProps} {...props} className={iconCssClasses}>
      <path d="M29.7563 16.5971C32.7479 13.7139 32.7479 9.04459 29.7563 6.16139C27.1088 3.60988 22.9364 3.27819 19.8918 5.37553L19.8071 5.43166C19.0446 5.95727 18.8699 6.97787 19.4152 7.7076C19.9606 8.43733 21.0196 8.61084 21.7768 8.08523L21.8615 8.02909C23.5612 6.8605 25.8857 7.04421 27.3577 8.46795C29.0256 10.0754 29.0256 12.6779 27.3577 14.2854L21.4167 20.0212C19.7488 21.6286 17.0484 21.6286 15.3805 20.0212C13.9032 18.5974 13.7126 16.3572 14.9251 14.7242L14.9834 14.6426C15.5287 13.9078 15.3487 12.8872 14.5915 12.3667C13.8344 11.8461 12.7701 12.0145 12.23 12.7443L12.1718 12.8259C9.99024 15.7551 10.3344 19.7762 12.9819 22.3277C15.9735 25.2109 20.8184 25.2109 23.81 22.3277L29.7563 16.5971ZM2.24373 15.4029C-0.747911 18.2861 -0.747911 22.9554 2.24373 25.8386C4.89121 28.3901 9.06362 28.7218 12.1082 26.6245L12.1929 26.5683C12.9554 26.0427 13.1301 25.0221 12.5848 24.2924C12.0394 23.5627 10.9804 23.3892 10.2232 23.9148L10.1385 23.9709C8.43882 25.1395 6.11434 24.9558 4.64234 23.532C2.97444 21.9195 2.97444 19.317 4.64234 17.7095L10.5833 11.9788C12.2512 10.3714 14.9516 10.3714 16.6195 11.9788C18.0968 13.4026 18.2874 15.6428 17.0749 17.2809L17.0166 17.3625C16.4713 18.0973 16.6513 19.1179 17.4085 19.6384C18.1656 20.159 19.2299 19.9906 19.77 19.2608L19.8282 19.1792C22.0098 16.2449 21.6656 12.2238 19.0181 9.67226C16.0265 6.78906 11.1816 6.78906 8.18996 9.67226L2.24373 15.4029Z" />
    </SvgIcon>
  );
}
