<template>
  <i
    :class="[
      icon,
      'app-icon',
      `fa-${size}`,
      {
        [`is-${type}`]: type,
        'no-branding': noBranding,
      },
    ]"
  />
</template>

<script>
  /**
   * A customized wrapper around the `<i>` tag that uses the `fontawesome` library.
   *
   * @vuedoc
   * @exports AppIcon
   * @category Components
   */
  export default {
    name: 'AppIcon',
    props: {
      /**
       * A string which includes the icon type (fa-solid, fa-regular, etc) and icon name (fa-trash-can, fa-circle-info, etc) to render.
       */
      icon: {
        type: String,
        required: true,
      },
      /**
       * Prop used to render the "primary" and "secondary" type buttons with ThreeFlow blue instead of branding colors.
       */
      noBranding: {
        type: Boolean,
        default: false,
      },
      /**
       * The fontawesome [icon size property](https://fontawesome.com/v6/docs/web/style/size) without the `fa-` prefix, which is added to the class automatically.
       */
      size: {
        type: String,
        default: 'lg',
        validator: (value) => (
          [
            // relative sizes
            '2xs',
            'xs',
            'sm',
            'lg',
            'xl',
            '2xl',
            // literal sizes
            '1x',
            '2x',
            '3x',
            '4x',
            '5x',
            '6x',
            '7x',
            '8x',
            '9x',
            '10x',
          ].includes(value)
        ),
      },
      /**
       * The prop used to render themed colors (danger, success, etc).
       */
      type: {
        type: String,
        default: '',
        validator: (value) => (
          [
            '',
            'danger',
            'info',
            'primary',
            'success',
            'warning',
          ].includes(value)
        ),
      },
    },
  };
</script>

<style lang="scss" scoped>
  .is {
    &-danger {
      color: var(--tf-danger-font-color);
    }

    &-info {
      color: var(--tf-info-font-color);
    }

    &-primary {
      color: var(--primary);

      &.no-branding {
        color: var(--tf-primary);
      }
    }

    &-success {
      color: var(--tf-success-font-color);
    }

    &-warning {
      color: var(--tf-warning-font-color);
    }
  }
</style>
