<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :viewBox="viewBox"
    :aria-labelledby="label"
    role="presentation"
    fill-rule="evenodd"
    clip-rule="evenodd"
    class="l-icon"
    fill="currentColor"
    :style="{
      '--icon-color': iconStyle,
      '--icon-size': 'var(--spacing-' + this.size + ')',
    }"
  >
    <title :id="label" lang="en">{{ label }} icon</title>
    <g>
      <!-- @slot Icon slot -->
      <slot />
    </g>
  </svg>
</template>

<script>
export default {
  name: "l-icon",
  props: {
    /**
     * The label of the icon (mainly for accessibility purposes).
     */
    label: {
      type: String,
    },
    /**
     * The viewbox of the icon.
     */
    viewBox: {
      type: String,
      default: "0 0 24 24",
    },
    /**
     * The type of the icon.
     */
    type: {
      type: String,
      default: "current",
      validator: function (value) {
        return (
          [
            "current",
            "primary",
            "secondary",
            "tertiary",
            "success",
            "warning",
            "danger",
            "neutral",
            "white",
            "black",
            "admin"
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The shade of the type color.
     */
    shade: {
      type: String,
      default: "500",
      validator: function (value) {
        return (
          [
            "50",
            "100",
            "200",
            "300",
            "400",
            "500",
            "600",
            "700",
            "800",
            "900",
          ].indexOf(value) !== -1
        );
      },
    },
    /**
     * The size of the icon.
     *
     * Sizes are defined using the spacing unit tokens.
     */
    size: {
      type: [String, Number],
      default: "4",
    },
  },
  computed: {
    iconStyle() {
      if (this.type === "current") {
        return "currentColor";
      }
      if (this.type === "white" || this.type === "black") {
        return `var(--${this.type})`;
      }
      return `var(--${this.type}-${this.shade})`;
    },
  },
};
</script>

<style>
.l-icon {
  display: inline-block;
  color: var(--icon-color);
  width: var(--icon-size);
  height: var(--icon-size);
}
</style>
