import { FC } from "react";

const Help = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    stroke="#fff"
    fill="#fff"
    height="28"
    width="28"
  >
    <circle
      stroke-width="3"
      fill="none"
      stroke="currentColor"
      r="12.5"
      cy="14"
      cx="14"
    />
    <path
      fill="inherit"
      d="M12.004 17.816v-.867c0-.531.074-1 .223-1.406.148-.414.386-.805.714-1.172.328-.375.762-.758 1.301-1.148.485-.344.871-.653 1.16-.926.297-.274.512-.543.645-.809.14-.273.21-.582.21-.925 0-.508-.187-.895-.562-1.16-.375-.266-.898-.4-1.57-.4s-1.34.106-2.004.317c-.656.211-1.324.489-2.004.832L8.84 7.586c.781-.438 1.629-.79 2.543-1.055.914-.273 1.914-.41 3-.41 1.672 0 2.965.402 3.879 1.207.922.797 1.382 1.813 1.382 3.047 0 .656-.105 1.227-.316 1.71a4.165 4.165 0 01-.937 1.337c-.414.406-.934.836-1.559 1.289-.469.344-.828.633-1.078.867-.25.235-.422.469-.516.703a2.356 2.356 0 00-.129.832v.703zm-.375 4.008c0-.734.2-1.25.598-1.547.406-.297.894-.445 1.464-.445.555 0 1.032.148 1.43.445.406.297.61.813.61 1.547 0 .703-.204 1.211-.61 1.524-.398.312-.875.468-1.43.468-.57 0-1.058-.156-1.464-.468-.399-.313-.598-.82-.598-1.524z"
    />
  </svg>
);

const Trash = () => (
  <svg
    className="trash-can"
    width="35"
    height="30"
    viewBox="0 0 22 30"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M2 7H20V27C20 28.1046 19.1046 29 18 29H4C2.89543 29 2 28.1046 2 27V7Z"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
    />
    <path
      d="M6 11L6 24"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M11 11V24"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M16 11V24"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      className="trash-lid"
      d="M9 0.5H13C13.2761 0.5 13.5 0.723858 13.5 1V2.5H8.5V1C8.5 0.723858 8.72386 0.5 9 0.5Z"
      stroke="currentColor"
      fill="none"
    />
    <path
      className="trash-lid"
      d="M2 2.5H20C20.8284 2.5 21.5 3.17157 21.5 4V6.5H0.5V4C0.5 3.17157 1.17157 2.5 2 2.5Z"
      stroke="currentColor"
      fill="none"
    />
  </svg>
);

const Trash_hover = () => (
  <svg
    width="35"
    height="35"
    viewBox="0 0 23 35"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M3 12H21V32C21 33.1046 20.1046 34 19 34H5C3.89543 34 3 33.1046 3 32V12Z"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
    />
    <path
      d="M7 16L7 29"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M12 16V29"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M17 16V29"
      stroke="currentColor"
      fill="none"
      stroke-width="2"
      stroke-linecap="round"
    />
    <path
      d="M8.59244 1.36064L12.5317 0.666048C12.8036 0.618097 13.063 0.799681 13.1109 1.07163L13.3714 2.54884L8.44734 3.41708L8.18687 1.93987C8.13891 1.66792 8.3205 1.40859 8.59244 1.36064Z"
      stroke="currentColor"
      fill="none"
    />
    <path
      d="M2.05644 4.54394L19.783 1.41827C20.5988 1.27442 21.3768 1.81917 21.5207 2.63501L21.9548 5.09703L1.27382 8.74365L0.8397 6.28163C0.695845 5.46578 1.2406 4.6878 2.05644 4.54394Z"
      stroke="currentColor"
      fill="none"
    />
  </svg>
);

const Anvil = () => (
  <svg
    width="16"
    height="16"
    viewBox="0 0 16 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect
      className="prefix__anvil-base"
      x="4.5"
      y="9.5"
      width="10"
      height="2"
      rx=".5"
      stroke="currentColor"
    />
    <path
      className="prefix__anvil-body"
      d="M6 1H2c1 1 3.5 1.5 5 2s1.543 1.292 0 3L6 7v1h7V7s-1.5-1-2-2 0-2.5 4-3V.5H6V1z"
      stroke="currentColor"
    />
  </svg>
);

const Discord = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    fill="currentColor"
    className="bi bi-discord"
    viewBox="0 0 16 16"
  >
    <path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612" />
  </svg>
);

const library = {
  Help,
  Trash,
  Trash_hover,
  Anvil,
  Discord,
};

interface IProps {
  className?: string;
  icon: keyof typeof library;
}

export const Icon: FC<IProps> = ({ className, icon }) => {
  const ICON = library[icon];

  return (
    <span className={className}>
      <ICON />
    </span>
  );
};
