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="M1 8C1 9.38447 1.41054 10.7378 2.17971 11.889C2.94888 13.0401 4.04213 13.9373 5.32122 14.4672C6.6003 14.997 8.00776 15.1356 9.36563 14.8655C10.7235 14.5954 11.9708 13.9287 12.9497 12.9497C13.9287 11.9708 14.5954 10.7235 14.8655 9.36563C15.1356 8.00776 14.997 6.6003 14.4672 5.32122C13.9373 4.04213 13.0401 2.94888 11.889 2.17971C10.7378 1.41054 9.38447 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8ZM12.575 11.875L4.125 3.425C5.27532 2.4675 6.74196 1.97449 8.23708 2.04273C9.7322 2.11097 11.1478 2.73554 12.2062 3.79385C13.2645 4.85216 13.889 6.2678 13.9573 7.76292C14.0255 9.25804 13.5325 10.7247 12.575 11.875ZM4.12 12.58C2.90916 11.5518 2.1555 10.0853 2.02428 8.5022C1.89306 6.9191 2.39499 5.34858 3.42 4.135L11.865 12.58C10.7821 13.495 9.4102 13.997 7.9925 13.997C6.5748 13.997 5.20289 13.495 4.12 12.58Z" />
  </svg>
);

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

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