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="M12.5 15L11.45 14.5C10.6 14.1 10 13.2 10 12.25V9H15V12.25C15 13.2 14.45 14.1 13.55 14.5L12.5 15ZM11 10V12.25C11 12.85 11.35 13.35 11.85 13.6L12.5 13.9L13.15 13.6C13.65 13.35 14 12.8 14 12.25V10H11Z" />
    <path d="M11 6C11.5523 6 12 5.55228 12 5C12 4.44772 11.5523 4 11 4C10.4477 4 10 4.44772 10 5C10 5.55228 10.4477 6 11 6Z" />
    <path d="M10.5 1C8 1 6 3 6 5.5C6 5.95 6.05 6.4 6.2 6.8L1 12V15H4L9 10L8.3 9.3L6.9 10.7L6.2 10L5.5 10.7L6.2 11.4L5.4 12.2L4.7 11.5L4 12.2L4.7 12.9L3.6 14H2V12.4L7.3 7.1L7.15 6.5C7.05 6.15 7 5.85 7 5.5C7 3.55 8.55 2 10.5 2C12.45 2 14 3.55 14 5.5C14 6.25 13.75 6.95 13.35 7.5H14.5C14.8 6.9 14.95 6.2 14.95 5.5C15 3 13 1 10.5 1Z" />
  </svg>
);

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

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