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="M8 10C7.85166 10 7.70666 10.044 7.58332 10.1264C7.45999 10.2088 7.36386 10.3259 7.30709 10.463C7.25032 10.6 7.23547 10.7508 7.26441 10.8963C7.29335 11.0418 7.36478 11.1754 7.46967 11.2803C7.57456 11.3852 7.7082 11.4566 7.85368 11.4856C7.99917 11.5145 8.14997 11.4997 8.28701 11.4429C8.42406 11.3861 8.54119 11.29 8.6236 11.1667C8.70601 11.0433 8.75 10.8983 8.75 10.75C8.75 10.5511 8.67098 10.3603 8.53033 10.2197C8.38968 10.079 8.19891 10 8 10Z" />
    <path d="M8.5 4.5H7.5V9H8.5V4.5Z" />
    <path d="M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z" />
  </svg>
);

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

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