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.9737 9.50005C5.48436 9.50016 5.00598 9.35513 4.59907 9.08332C4.19217 8.81151 3.87501 8.42512 3.68773 7.97304C3.50045 7.52096 3.45145 7.02348 3.54693 6.54355C3.64242 6.06361 3.87809 5.62278 4.22415 5.2768L6.7768 2.72465C7.24077 2.26065 7.87006 1.99996 8.52624 1.99994C9.18241 1.99992 9.81172 2.26056 10.2757 2.72453C10.7397 3.1885 11.0004 3.81779 11.0004 4.47397C11.0005 5.13014 10.7398 5.75945 10.2759 6.22345L9.9997 6.49975L9.2918 5.7933L9.57065 5.51435C9.84599 5.23762 10.0004 4.86301 10 4.47263C9.99967 4.08224 9.84456 3.70793 9.5687 3.4317C9.28782 3.16364 8.91447 3.01408 8.5262 3.01408C8.13793 3.01408 7.76458 3.16364 7.4837 3.4317L4.93135 5.9837C4.79443 6.12056 4.68582 6.28305 4.61172 6.46189C4.53762 6.64073 4.49948 6.83242 4.49948 7.026C4.49948 7.21959 4.53762 7.41128 4.61172 7.59012C4.68582 7.76896 4.79443 7.93145 4.93135 8.0683C5.21223 8.33636 5.58558 8.48592 5.97385 8.48592C6.36212 8.48592 6.73547 8.33636 7.01635 8.0683L7.7235 8.77555C7.49421 9.00599 7.2215 9.18867 6.92115 9.31303C6.6208 9.43739 6.29878 9.50096 5.9737 9.50005Z" />
    <path d="M9.9737 8.50005C9.48436 8.50016 9.00598 8.35513 8.59907 8.08332C8.19217 7.81151 7.87501 7.42512 7.68773 6.97304C7.50045 6.52096 7.45145 6.02348 7.54693 5.54355C7.64242 5.06361 7.87809 4.62278 8.22415 4.2768L8.50045 4.0005L9.2076 4.7078L8.9313 4.98395C8.79442 5.12081 8.68583 5.28329 8.61175 5.46212C8.53767 5.64095 8.49954 5.83261 8.49954 6.02618C8.49954 6.21974 8.53767 6.41141 8.61175 6.59024C8.68583 6.76906 8.79442 6.93154 8.9313 7.0684C9.21218 7.33646 9.58553 7.48602 9.9738 7.48602C10.3621 7.48602 10.7354 7.33646 11.0163 7.0684C11.1463 6.9384 13.3809 4.70375 13.5689 4.51615C13.8449 4.23954 14 3.86474 14 3.47398C14 3.08322 13.8449 2.70842 13.5689 2.4318C13.2881 2.16374 12.9147 2.01418 12.5265 2.01418C12.1382 2.01418 11.7648 2.16374 11.4839 2.4318L10.7768 1.72455C11.2409 1.26126 11.87 1.00118 12.5258 1.00147C13.1816 1.00175 13.8104 1.26239 14.2742 1.72609C14.7379 2.18979 14.9985 2.81863 14.9989 3.47442C14.9992 4.13021 14.7391 4.7593 14.2759 5.22345C14.0876 5.41145 11.8539 7.64485 11.724 7.7752C11.4946 8.00572 11.2218 8.18847 10.9214 8.31289C10.621 8.43731 10.2989 8.50092 9.9737 8.50005Z" />
    <path d="M12 15.0001H2C1.73487 14.9998 1.48068 14.8943 1.2932 14.7069C1.10572 14.5194 1.00028 14.2652 1 14.0001V4.00005C1.00028 3.73492 1.10572 3.48073 1.2932 3.29325C1.48068 3.10578 1.73487 3.00033 2 3.00005H4V4.00005H2V14.0001H12V9.00005H13V14.0001C12.9997 14.2652 12.8943 14.5194 12.7068 14.7069C12.5193 14.8943 12.2651 14.9998 12 15.0001Z" />
  </svg>
);

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

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