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
    width="18"
    height="18"
    viewBox="0 0 18 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path d="M9 1.125C7.44248 1.125 5.91992 1.58686 4.62489 2.45218C3.32985 3.31749 2.32049 4.5474 1.72445 5.98637C1.12841 7.42534 0.972461 9.00874 1.27632 10.5363C1.58018 12.0639 2.3302 13.4671 3.43154 14.5685C4.53288 15.6698 5.93607 16.4198 7.46367 16.7237C8.99127 17.0275 10.5747 16.8716 12.0136 16.2756C13.4526 15.6795 14.6825 14.6702 15.5478 13.3751C16.4131 12.0801 16.875 10.5575 16.875 9C16.875 6.91142 16.0453 4.90838 14.5685 3.43153C13.0916 1.95469 11.0886 1.125 9 1.125ZM9 15.75C7.66498 15.75 6.35994 15.3541 5.2499 14.6124C4.13987 13.8707 3.27471 12.8165 2.76382 11.5831C2.25293 10.3497 2.11925 8.99251 2.3797 7.68314C2.64015 6.37377 3.28303 5.17103 4.22703 4.22703C5.17104 3.28302 6.37377 2.64015 7.68314 2.3797C8.99252 2.11925 10.3497 2.25292 11.5831 2.76381C12.8165 3.2747 13.8707 4.13987 14.6124 5.2499C15.3541 6.35993 15.75 7.66498 15.75 9C15.75 10.7902 15.0388 12.5071 13.773 13.773C12.5071 15.0388 10.7902 15.75 9 15.75Z" />
    <path d="M9.5625 4.5H8.4375V10.6875H9.5625V4.5Z" />
    <path d="M9 12.375C8.83313 12.375 8.67 12.4245 8.53124 12.5172C8.39249 12.6099 8.28434 12.7417 8.22048 12.8959C8.15662 13.05 8.13991 13.2197 8.17247 13.3834C8.20502 13.547 8.28538 13.6974 8.40338 13.8154C8.52138 13.9334 8.67172 14.0137 8.8354 14.0463C8.99907 14.0788 9.16872 14.0621 9.32289 13.9983C9.47707 13.9344 9.60884 13.8263 9.70156 13.6875C9.79427 13.5488 9.84375 13.3856 9.84375 13.2188C9.84375 12.995 9.75486 12.7804 9.59662 12.6221C9.43839 12.4639 9.22378 12.375 9 12.375Z" />
  </svg>
);

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

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