import React from "react";
import { getSvgNameFromAlias } from "./Aliases";
import { getSvgSize } from "./SvgSizes";
import { SvgIconProps } from "./IconProps.types";

const toRem = pixels => `${pixels / 16}rem`;

export default function SvgIcon({
  className,
  name,
  alias,
  size
}: SvgIconProps) {
  const getName = () => {
    if (name) {
      return name;
    }

    if (alias) {
      return getSvgNameFromAlias(alias);
    }
  };

  return (
    <svg
      className={`auik-fill-current ${className}`}
      style={{ width: "1em", height: "1em", fontSize: `${toRem(size)}` }}
    >
      <use xlinkHref={`#ico-${getSvgSize(getName(), size)}`}></use>
    </svg>
  );
}