import { forwardRef } from "react";

/**
 * Icon
 *
 * icon:     string - MDI icon name without the "mdi:" prefix (default: "check")
 * size:     "xs" | "sm" | "lg" | "xl"
 * rotate:   "90deg" | "180deg" | "270deg"
 * animate:  "spin" | "ping" | "blink" | "float" | "bounce" | "pulse"
 * duration: "sneeze" | "breath" | "linger" | "rest"
 */
const Icon = forwardRef(function Icon(
  {
    icon = "check",
    size,
    rotate,
    animate,
    duration,
    className = "",
    ...props
  },
  ref
) {
  const classes = [
    "prs-ico",
    size === "xs" && "prs-ico-xs",
    size === "sm" && "prs-ico-sm",
    size === "lg" && "prs-ico-lg",
    size === "xl" && "prs-ico-xl",
    animate === "spin" && "prs-animation-spin",
    animate === "ping" && "prs-animation-ping",
    animate === "blink" && "prs-animation-blink",
    animate === "float" && "prs-animation-float",
    animate === "bounce" && "prs-animation-bounce",
    animate === "pulse" && "prs-animation-pulse",
    duration === "sneeze" && "prs-duration-sneeze",
    duration === "breath" && "prs-duration-breath",
    duration === "linger" && "prs-duration-linger",
    duration === "rest" && "prs-duration-rest",
    className,
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <i ref={ref} className={classes} {...props}>
      <iconify-icon
        icon={`mdi:${icon}`}
        rotate={rotate || null}
        noobserver
      ></iconify-icon>
    </i>
  );
});

export default Icon;