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="M17.7501 8.375H9.62507V0.250001H8.37507V8.375H0.250073V9.625H8.37507V17.75H9.62507V9.625H17.7501V8.375Z"
      fill="#555761"
    />
    <path
      d="M14.9913 11.5L15.8751 12.3837L13.6338 14.625L15.8751 16.8662L14.9913 17.75L11.8663 14.625L14.9913 11.5Z"
      fill="#555761"
    />
    <path
      d="M5.87507 17.75H0.875073C0.768526 17.75 0.663745 17.7228 0.570682 17.6709C0.477618 17.619 0.399362 17.5442 0.343347 17.4536C0.287331 17.363 0.255415 17.2595 0.250631 17.1531C0.245846 17.0466 0.268352 16.9407 0.31601 16.8454L2.81601 11.8454C2.8737 11.7486 2.95556 11.6684 3.05356 11.6127C3.15156 11.557 3.26235 11.5277 3.37507 11.5277C3.48779 11.5277 3.59858 11.557 3.69659 11.6127C3.79459 11.6684 3.87644 11.7486 3.93413 11.8454L6.43413 16.8454C6.48179 16.9407 6.5043 17.0466 6.49951 17.1531C6.49473 17.2595 6.46281 17.363 6.4068 17.4536C6.35078 17.5442 6.27253 17.619 6.17946 17.6709C6.0864 17.7228 5.98162 17.75 5.87507 17.75ZM1.88645 16.5H4.8637L3.37507 13.5227L1.88645 16.5Z"
      fill="#555761"
    />
    <path
      d="M16.5001 6.5H12.7501C12.4187 6.49962 12.1009 6.3678 11.8666 6.13346C11.6323 5.89913 11.5005 5.5814 11.5001 5.25V1.5C11.5005 1.1686 11.6323 0.850876 11.8666 0.616538C12.1009 0.3822 12.4187 0.250382 12.7501 0.250001H16.5001C16.8315 0.250382 17.1492 0.3822 17.3835 0.616538C17.6179 0.850876 17.7497 1.1686 17.7501 1.5V5.25C17.7497 5.5814 17.6179 5.89913 17.3835 6.13346C17.1492 6.3678 16.8315 6.49962 16.5001 6.5ZM12.7501 1.5V5.25H16.5007L16.5001 1.5H12.7501Z"
      fill="#555761"
    />
    <path
      d="M3.37507 6.5C2.75701 6.5 2.15282 6.31672 1.63892 5.97334C1.12501 5.62996 0.724473 5.14191 0.487949 4.57089C0.251425 3.99987 0.18954 3.37153 0.310119 2.76534C0.430697 2.15915 0.728325 1.60233 1.16536 1.16529C1.6024 0.728254 2.15922 0.430626 2.76542 0.310047C3.37161 0.189469 3.99994 0.251354 4.57096 0.487878C5.14198 0.724402 5.63003 1.12494 5.97341 1.63884C6.31679 2.15275 6.50007 2.75693 6.50007 3.375C6.4991 4.2035 6.16954 4.99779 5.5837 5.58363C4.99786 6.16947 4.20357 6.49902 3.37507 6.5ZM3.37507 1.5C3.00423 1.5 2.64172 1.60997 2.33338 1.816C2.02504 2.02202 1.78471 2.31486 1.6428 2.65747C1.50088 3.00008 1.46375 3.37708 1.5361 3.7408C1.60845 4.10451 1.78702 4.4386 2.04925 4.70083C2.31147 4.96305 2.64556 5.14163 3.00928 5.21397C3.37299 5.28632 3.74999 5.24919 4.0926 5.10728C4.43522 4.96536 4.72805 4.72504 4.93408 4.4167C5.14011 4.10835 5.25007 3.74584 5.25007 3.375C5.24953 2.87789 5.05181 2.40129 4.70029 2.04978C4.34878 1.69827 3.87219 1.50055 3.37507 1.5Z"
      fill="#555761"
    />
  </svg>
);

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

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