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
    xmlns="http://www.w3.org/2000/svg"
    width="18"
    height="18"
    viewBox="0 0 18 18"
    fill="none"
    {...props}
  >
    <rect width="18" height="18" />
    <path d="M16.3125 13.6036V4.39644C16.9659 4.16323 17.4375 3.54471 17.4375 2.8125C17.4375 1.88196 16.6805 1.125 15.75 1.125C14.8195 1.125 14.0625 1.88196 14.0625 2.8125C14.0625 3.03278 14.1078 3.2418 14.1847 3.43462L9 7.97141L3.81527 3.43485C3.89233 3.24174 3.9375 3.03278 3.9375 2.8125C3.9375 1.88196 3.18054 1.125 2.25 1.125C1.31946 1.125 0.5625 1.88196 0.5625 2.8125C0.5625 3.54476 1.0341 4.16329 1.6875 4.39616V13.6038C1.0341 13.8367 0.5625 14.4552 0.5625 15.1874C0.5625 16.118 1.31946 16.8749 2.25 16.8749C3.18054 16.8749 3.9375 16.118 3.9375 15.1874C3.9375 14.8125 3.81049 14.4692 3.6027 14.1888L6.60279 11.5636L7.93283 13.8911C7.55724 14.2009 7.3125 14.6636 7.3125 15.1874C7.3125 16.118 8.06946 16.8749 9 16.8749C9.93054 16.8749 10.6875 16.118 10.6875 15.1874C10.6875 14.6636 10.4426 14.2009 10.0672 13.8911L11.3972 11.5636L14.3973 14.1888C14.1895 14.4692 14.0625 14.8125 14.0625 15.1874C14.0625 16.118 14.8195 16.8749 15.75 16.8749C16.6805 16.8749 17.4375 16.118 17.4375 15.1874C17.4375 14.4552 16.9659 13.8367 16.3125 13.6036ZM15.75 2.25C16.0602 2.25 16.3125 2.50239 16.3125 2.8125C16.3125 3.12261 16.0602 3.375 15.75 3.375C15.4398 3.375 15.1875 3.12261 15.1875 2.8125C15.1875 2.50239 15.4398 2.25 15.75 2.25ZM13.6001 5.44101L11.1028 9.81135L9.85421 8.71875L13.6001 5.44101ZM8.14584 8.71875L6.89709 9.81135L4.39976 5.44101L8.14584 8.71875ZM2.25 2.25C2.56022 2.25 2.8125 2.50239 2.8125 2.8125C2.8125 3.12261 2.56022 3.375 2.25 3.375C1.93978 3.375 1.6875 3.12261 1.6875 2.8125C1.6875 2.50239 1.93978 2.25 2.25 2.25ZM2.25 15.75C1.93978 15.75 1.6875 15.4976 1.6875 15.1875C1.6875 14.8774 1.93978 14.625 2.25 14.625C2.56022 14.625 2.8125 14.8774 2.8125 15.1875C2.8125 15.4976 2.56022 15.75 2.25 15.75ZM2.8125 13.3855V4.93065L6.03343 10.5672L2.8125 13.3855ZM9 15.75C8.68978 15.75 8.4375 15.4976 8.4375 15.1875C8.4375 14.8774 8.68978 14.625 9 14.625C9.31022 14.625 9.5625 14.8774 9.5625 15.1875C9.5625 15.4976 9.31022 15.75 9 15.75ZM9 13.4915L7.46657 10.8078L9 9.46609L10.5334 10.8078L9 13.4915ZM15.1875 4.93042V13.3855L11.9666 10.5672L15.1875 4.93042ZM15.75 15.7501C15.4398 15.7501 15.1875 15.4977 15.1875 15.1876C15.1875 14.8774 15.4398 14.6251 15.75 14.6251C16.0602 14.6251 16.3125 14.8774 16.3125 15.1876C16.3125 15.4977 16.0602 15.7501 15.75 15.7501Z" />
  </svg>
);

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

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