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="M7 8.295L5.705 7L5 7.705L7 9.705L11 5.705L10.295 5L7 8.295Z" />
    <path d="M8 15L4.9121 13.3535C4.03174 12.8852 3.29552 12.186 2.78248 11.3309C2.26944 10.4758 1.99893 9.49718 2 8.5V2C2.00028 1.73487 2.10573 1.48068 2.2932 1.2932C2.48068 1.10572 2.73487 1.00028 3 1H13C13.2651 1.00028 13.5193 1.10572 13.7068 1.2932C13.8943 1.48068 13.9997 1.73487 14 2V8.5C14.0011 9.49718 13.7306 10.4758 13.2175 11.3309C12.7045 12.186 11.9683 12.8852 11.0879 13.3535L8 15ZM3 2V8.5C2.99914 9.3159 3.22048 10.1166 3.64028 10.8163C4.06007 11.5159 4.66246 12.088 5.3828 12.4712L8 13.8666L10.6172 12.4712C11.3375 12.088 11.9399 11.5159 12.3597 10.8163C12.7795 10.1166 13.0009 9.3159 13 8.5V2H3Z" />
  </svg>
);

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

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