import React, { useMemo } from 'react';
import { palette, useDarkMode } from '@mongodb-js/compass-components';

const ZeroGraphic: React.FunctionComponent = () => {
  const darkMode = useDarkMode();

  const fillColor = useMemo(
    () => (darkMode ? palette.white : palette.black),
    [darkMode]
  );

  return (
    <svg
      width="72"
      height="72"
      viewBox="0 0 72 72"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M41 16V4.00001L55 18H43C41.8954 18 41 17.1046 41 16Z"
        fill={palette.green.base}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.8649 33.1158L23.6549 26.6382L24.3451 27.3618L17.5602 33.8346C17.4799 33.9177 17.4799 34.0823 17.5602 34.1654L24.3451 40.6382L23.6549 41.3618L16.8573 34.8769C16.3808 34.4028 16.3809 33.5973 16.8573 33.1232L16.8649 33.1158ZM44.708 33.8346L37.9231 27.3618L38.6133 26.6382L45.4109 33.1231C45.8874 33.5972 45.8873 34.4028 45.4109 34.8768L45.4034 34.8843L38.6133 41.3618L37.9231 40.6382L44.708 34.1654C44.7882 34.0823 44.7882 33.9177 44.708 33.8346ZM34.2704 27.3677L28.0022 40.9953L27.0937 40.5774L33.3619 26.9499L34.2704 27.3677Z"
        fill={fillColor}
      />
      <path
        d="M40 56C40 62.6182 45.3818 68 52 68C58.6182 68 64 62.6182 64 56C64 49.3818 58.6182 44 52 44C45.3818 44 40 49.3818 40 56Z"
        fill={palette.green.base}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M40.7755 61.5H9C7.63127 61.5 6.5 60.3975 6.5 59.0311V5.96893C6.5 4.60253 7.63127 3.50002 9 3.50002H40.7778C40.816 3.50002 40.8533 3.50431 40.8891 3.51245C41.0547 3.47474 41.2307 3.52362 41.3536 3.64646L55.3536 17.6465C55.4799 17.7728 55.528 17.9554 55.4841 18.125C55.4945 18.1651 55.5 18.2072 55.5 18.2505C55.5 18.2503 55.5 18.2502 55.433 18.2501L55.5 18.2505L55.4998 20.0065C55.4996 21.1241 55.4992 22.7206 55.4984 24.6361C55.4969 28.4671 55.4937 33.5741 55.4875 38.6781C55.4853 40.4683 55.4827 42.2581 55.4797 43.9924C60.6855 45.5025 64.5 50.3128 64.5 56C64.5 62.8943 58.8943 68.5 52 68.5C47.0782 68.5 42.8131 65.6431 40.7755 61.5ZM9 4.50002H40.5V16C40.5 17.3807 41.6193 18.5 43 18.5H54.5L54.4998 20.0063C54.4996 21.1239 54.4992 22.7203 54.4984 24.6357C54.4969 28.4665 54.4938 33.5733 54.4875 38.6769C54.4854 40.3832 54.483 42.0892 54.4801 43.7469C53.6783 43.585 52.8489 43.5 52 43.5C45.1057 43.5 39.5 49.1057 39.5 56C39.5 57.5857 39.7965 59.1032 40.3371 60.5H9C8.16873 60.5 7.5 59.8305 7.5 59.0311V5.96893C7.5 5.16952 8.16873 4.50002 9 4.50002ZM41.5 5.20712V16C41.5 16.8284 42.1716 17.5 43 17.5H53.7929L41.5 5.20712ZM40.5 56C40.5 49.658 45.658 44.5 52 44.5C58.342 44.5 63.5 49.658 63.5 56C63.5 62.3421 58.342 67.5 52 67.5C45.658 67.5 40.5 62.3421 40.5 56Z"
        fill={fillColor}
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M58.3904 51.3124L51.1067 60.4171C50.5385 61.1273 49.4742 61.1725 48.8478 60.5132L45.6375 57.1339L46.3625 56.4451L49.5728 59.8244C49.7816 60.0442 50.1364 60.0291 50.3258 59.7924L57.6096 50.6877L58.3904 51.3124Z"
        fill={fillColor}
      />
    </svg>
  );
};

export { ZeroGraphic };