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="M15.47 7.83C14.8819 6.30882 13.861 4.99331 12.5334 4.04604C11.2058 3.09878 9.62971 2.56129 7.99997 2.5C6.37023 2.56129 4.79416 3.09878 3.46657 4.04604C2.13898 4.99331 1.11805 6.30882 0.52997 7.83C0.490254 7.93985 0.490254 8.06015 0.52997 8.17C1.11805 9.69118 2.13898 11.0067 3.46657 11.954C4.79416 12.9012 6.37023 13.4387 7.99997 13.5C9.62971 13.4387 11.2058 12.9012 12.5334 11.954C13.861 11.0067 14.8819 9.69118 15.47 8.17C15.5097 8.06015 15.5097 7.93985 15.47 7.83ZM7.99997 12.5C5.34997 12.5 2.54997 10.535 1.53497 8C2.54997 5.465 5.34997 3.5 7.99997 3.5C10.65 3.5 13.45 5.465 14.465 8C13.45 10.535 10.65 12.5 7.99997 12.5Z" />
    <path d="M7.99997 5C7.40663 5 6.82661 5.17595 6.33326 5.50559C5.83991 5.83524 5.45539 6.30377 5.22833 6.85195C5.00127 7.40013 4.94186 8.00333 5.05761 8.58527C5.17337 9.16721 5.45909 9.70176 5.87865 10.1213C6.29821 10.5409 6.83276 10.8266 7.4147 10.9424C7.99664 11.0581 8.59984 10.9987 9.14802 10.7716C9.6962 10.5446 10.1647 10.1601 10.4944 9.66671C10.824 9.17336 11 8.59334 11 8C11 7.20435 10.6839 6.44129 10.1213 5.87868C9.55868 5.31607 8.79562 5 7.99997 5ZM7.99997 10C7.60441 10 7.21773 9.8827 6.88883 9.66294C6.55993 9.44318 6.30359 9.13082 6.15221 8.76537C6.00084 8.39991 5.96123 7.99778 6.0384 7.60982C6.11557 7.22186 6.30605 6.86549 6.58576 6.58579C6.86546 6.30608 7.22183 6.1156 7.60979 6.03843C7.99775 5.96126 8.39988 6.00087 8.76534 6.15224C9.13079 6.30362 9.44315 6.55996 9.66291 6.88886C9.88267 7.21776 9.99997 7.60444 9.99997 8C9.99997 8.53043 9.78926 9.03914 9.41418 9.41421C9.03911 9.78929 8.5304 10 7.99997 10Z" />
  </svg>
);

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

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