import React from "react";

interface IconProps {
  className?: string;
}

export class ClockIcon extends React.Component<IconProps> {
  render() {
    return (
      <svg
        className={this.props.className}
        width="1em"
        height="1em"
        viewBox="0 0 29 30"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M27.2868 12.2702C26.6542 12.5466 25.9173 12.2578 25.6409 11.6252C24.5491 9.1263 22.5402 7.11747 20.0413 6.02564C19.4087 5.74924 19.1199 5.01234 19.3963 4.37973C19.6727 3.74712 20.4096 3.45836 21.0422 3.73476C24.1183 5.07874 26.5878 7.54825 27.9318 10.6243C28.2082 11.2569 27.9194 11.9938 27.2868 12.2702ZM8.95872 6.02564C9.59133 5.74924 9.8801 5.01234 9.6037 4.37973C9.3273 3.74713 8.5904 3.45836 7.95779 3.73476C4.88175 5.07874 2.41223 7.54825 1.06825 10.6243C0.791855 11.2569 1.08062 11.9938 1.71323 12.2702C2.34584 12.5466 3.08274 12.2578 3.35914 11.6252C4.45096 9.1263 6.45979 7.11747 8.95872 6.02564ZM7.2917 17.1662C7.2917 13.1851 10.519 9.95784 14.5 9.95784C18.4811 9.95784 21.7084 13.1851 21.7084 17.1662C21.7084 21.1472 18.4811 24.3745 14.5 24.3745C10.519 24.3745 7.2917 21.1472 7.2917 17.1662ZM14.5 7.45784C9.13827 7.45784 4.7917 11.8044 4.7917 17.1662C4.7917 22.5279 9.13827 26.8745 14.5 26.8745C19.8618 26.8745 24.2084 22.5279 24.2084 17.1662C24.2084 11.8044 19.8618 7.45784 14.5 7.45784ZM15.1458 15.3538C15.1458 14.6635 14.5862 14.1038 13.8958 14.1038C13.2055 14.1038 12.6458 14.6635 12.6458 15.3538V17.7705C12.6458 18.4609 13.2055 19.0205 13.8958 19.0205H16.3125C17.0028 19.0205 17.5625 18.4609 17.5625 17.7705C17.5625 17.0801 17.0028 16.5205 16.3125 16.5205H15.1458V15.3538Z"
          fill="currentColor"
        />
      </svg>
    );
  }
}

export class UnionIcon extends React.Component<IconProps> {
  render() {
    return (
      <svg
        className={this.props.className}
        width="1em"
        height="1em"
        viewBox="0 0 13 13"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M2.28845 12.0089C1.89538 12.3969 1.25809 12.3969 0.865022 12.0089C0.471954 11.621 0.471954 10.992 0.865022 10.604L5.04287 6.48041L0.865022 2.35681C0.471954 1.96885 0.471954 1.33984 0.865022 0.951873C1.25809 0.563909 1.89538 0.563909 2.28845 0.951873L6.46629 5.07547L10.8532 0.745563C11.2462 0.357599 11.8835 0.357599 12.2766 0.745563C12.6697 1.13353 12.6697 1.76254 12.2766 2.1505L7.88972 6.48041L12.2766 10.8103C12.6697 11.1983 12.6697 11.8273 12.2766 12.2152C11.8835 12.6032 11.2462 12.6032 10.8532 12.2152L6.46629 7.88535L2.28845 12.0089Z"
          fill="currentColor"
        />
      </svg>
    );
  }
}

export class InfoIcon extends React.Component<IconProps> {
  render() {
    return (
      <svg
        className={this.props.className}
        width="1em"
        height="1em"
        viewBox="0 0 29 28"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_667_2895)">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M14.229 3C8.15387 3 3.229 7.92487 3.229 14C3.229 20.0751 8.15387 25 14.229 25C20.3041 25 25.229 20.0751 25.229 14C25.229 7.92487 20.3041 3 14.229 3ZM14.229 0C6.49702 0 0.229004 6.26801 0.229004 14C0.229004 21.732 6.49702 28 14.229 28C21.961 28 28.229 21.732 28.229 14C28.229 6.26801 21.961 0 14.229 0Z"
            fill="currentColor"
          />
          <path
            d="M12.9921 9.40434C12.9921 8.45759 13.7507 7.7002 14.6704 7.7002C15.59 7.7002 16.3257 8.48126 16.3027 9.42801C16.3027 10.3748 15.544 11.1558 14.6474 11.1321C13.7278 11.1085 12.9691 10.3274 12.9921 9.40434ZM17.0154 19.2032C16.9694 19.3452 16.8775 19.5108 16.7855 19.6055C16.1877 20.2446 15.452 20.5996 14.6014 20.6233C14.1876 20.6233 13.7967 20.6233 13.3829 20.5523C12.7162 20.4576 11.8655 19.6055 12.0035 18.7061L12.2794 16.86L12.8311 13.6647C12.8311 13.5937 12.8541 13.5227 12.8541 13.4517C12.8541 13.002 12.7162 12.8363 12.2794 12.789C12.0954 12.7653 11.9115 12.7416 11.7276 12.6943C11.5207 12.6233 11.4287 12.4339 11.4287 12.2682C11.4517 12.0789 11.5667 11.9605 11.7966 11.9132C11.9115 11.8895 12.0495 11.8895 12.1644 11.8895H15.2911C15.6819 11.8895 15.9119 12.0789 15.9119 12.4813C15.9119 12.8126 15.8659 13.144 15.7969 13.4753C15.59 14.7061 15.3601 15.9132 15.1532 17.144C15.0842 17.5463 14.9922 17.9487 14.9463 18.3511C14.9233 18.5404 14.9463 18.7535 14.9922 18.9428C15.0612 19.2032 15.2451 19.3452 15.498 19.2978C15.7049 19.2742 15.9119 19.2032 16.1188 19.1085C16.2797 19.0375 16.4176 18.9191 16.5786 18.8718C16.8775 18.7534 17.0844 18.9428 17.0154 19.2032Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="clip0_667_2895">
            <rect
              width="28"
              height="28"
              fill="white"
              transform="translate(0.229004)"
            />
          </clipPath>
        </defs>
      </svg>
    );
  }
}

export class MissionInfoIcon extends React.Component<IconProps> {
  render() {
    return (
      <svg
        className={this.props.className}
        width="1em"
        height="1em"
        viewBox="0 0 42 42"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g clipPath="url(#clip0_97_57295)">
          <path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M21 4.5C11.8873 4.5 4.5 11.8873 4.5 21C4.5 30.1127 11.8873 37.5 21 37.5C30.1127 37.5 37.5 30.1127 37.5 21C37.5 11.8873 30.1127 4.5 21 4.5ZM21 0C9.40202 0 0 9.40202 0 21C0 32.598 9.40202 42 21 42C32.598 42 42 32.598 42 21C42 9.40202 32.598 0 21 0Z"
            fill="currentColor"
          />
          <path
            d="M19.1458 14.107C19.1458 12.6869 20.2838 11.5508 21.6633 11.5508C23.0427 11.5508 24.1462 12.7224 24.1117 14.1425C24.1117 15.5626 22.9737 16.7342 21.6288 16.6987C20.2494 16.6632 19.1113 15.4916 19.1458 14.107ZM25.1808 28.8052C25.1118 29.0182 24.9739 29.2668 24.8359 29.4088C23.9393 30.3673 22.8358 30.8999 21.5598 30.9354C20.9391 30.9354 20.3528 30.9354 19.7321 30.8289C18.732 30.6869 17.456 29.4088 17.6629 28.0597L18.0768 25.2904L18.9044 20.4975C18.9044 20.391 18.9389 20.2845 18.9389 20.178C18.9389 19.5034 18.732 19.2549 18.0768 19.1839C17.8009 19.1484 17.525 19.1129 17.2491 19.0419C16.9387 18.9354 16.8008 18.6514 16.8008 18.4029C16.8353 18.1188 17.0077 17.9413 17.3526 17.8703C17.525 17.8348 17.7319 17.8348 17.9043 17.8348H22.5944C23.1806 17.8348 23.5255 18.1188 23.5255 18.7224C23.5255 19.2194 23.4565 19.7165 23.3531 20.2135C23.0427 22.0597 22.6978 23.8703 22.3875 25.7165C22.284 26.32 22.1461 26.9236 22.0771 27.5271C22.0426 27.8111 22.0771 28.1307 22.1461 28.4147C22.2495 28.8052 22.5254 29.0182 22.9048 28.9472C23.2151 28.9117 23.5255 28.8052 23.8359 28.6632C24.0773 28.5567 24.2842 28.3792 24.5256 28.3082C24.9739 28.1307 25.2843 28.4147 25.1808 28.8052Z"
            fill="currentColor"
          />
        </g>
        <defs>
          <clipPath id="clip0_97_57295">
            <rect width="42" height="42" fill="white" />
          </clipPath>
        </defs>
      </svg>
    );
  }
}

export class MissionArrowIcon extends React.Component<IconProps> {
  render() {
    return (
      <svg
        className={this.props.className}
        width="1em"
        height="1em"
        viewBox="0 0 36 36"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M18 36C27.9411 36 36 27.9411 36 18C36 8.05887 27.9411 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36ZM14.3322 11.3253C13.6479 10.5975 13.6925 9.46128 14.4318 8.78757C15.1711 8.11387 16.3251 8.15775 17.0094 8.8856L24.4383 16.7871C25.0855 17.4755 25.0855 18.5384 24.4383 19.2268L17.0094 27.1282C16.3251 27.8561 15.1711 27.9 14.4318 27.2263C13.6925 26.5525 13.6479 25.4164 14.3322 24.6885L20.6141 18.0069L14.3322 11.3253Z"
          fill="currentColor"
        />
      </svg>
    );
  }
}