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" xmlns="http://www.w3.org/2000/svg" {...props}>
    <path d="M8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571ZM7.4375 5.75001H8.5625V10.25H7.4375V5.75001ZM8 12.75C7.85167 12.75 7.70666 12.706 7.58333 12.6236C7.45999 12.5412 7.36386 12.4241 7.30709 12.287C7.25033 12.15 7.23548 11.9992 7.26441 11.8537C7.29335 11.7082 7.36478 11.5746 7.46967 11.4697C7.57456 11.3648 7.7082 11.2934 7.85369 11.2644C7.99917 11.2355 8.14997 11.2503 8.28702 11.3071C8.42406 11.3639 8.54119 11.46 8.62361 11.5833C8.70602 11.7067 8.75 11.8517 8.75 12C8.75 12.1989 8.67099 12.3897 8.53033 12.5303C8.38968 12.671 8.19892 12.75 8 12.75Z" />
    <path d="M14.5 14.75H1.5C1.4141 14.75 1.32965 14.7279 1.25478 14.6857C1.17992 14.6436 1.11718 14.5829 1.0726 14.5095C1.02802 14.436 1.00311 14.3524 1.00027 14.2665C0.997436 14.1807 1.01677 14.0955 1.0564 14.0193L7.5564 1.51931C7.59862 1.43812 7.66231 1.37008 7.74053 1.3226C7.81875 1.27511 7.9085 1.25 8 1.25C8.09151 1.25 8.18126 1.27511 8.25948 1.3226C8.3377 1.37008 8.40138 1.43812 8.4436 1.51931L14.9436 14.0193C14.9832 14.0955 15.0026 14.1807 14.9997 14.2665C14.9969 14.3524 14.972 14.436 14.9274 14.5095C14.8828 14.5829 14.8201 14.6436 14.7452 14.6857C14.6704 14.7279 14.5859 14.75 14.5 14.75ZM2.3253 13.75H13.6747L13.6757 13.7483L8.001 2.83571H7.999L2.32435 13.7483L2.3253 13.75Z" />
  </svg>
);

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

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