<script setup lang="ts">
import { withDefaults, computed } from "vue";
import { IProps } from "./props";

const props = withDefaults(defineProps<IProps>(), {
  outline: false,
  alternative: false,
  variant: "primary",
});

const getClasses = computed<string[]>(() => {
  const classes: string[] = [];
  classes.push(`tag-${props.variant}`);
  if (props.outline) {
    classes.push("tag-outline");
  }
  if (props.alternative) {
    classes.push("tag-alternative");
  }
  return classes;
});
</script>

<template>
  <div class="tag" :class="getClasses">
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tag {
  position: relative;
  border: none;
  outline: none;
  font-weight: var(--weight-semibold);
  height: var(--h-11);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-lg);
  font-size: var(--font-xs);
  border: none;
  cursor: default;
  outline: none;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;

  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    text-wrap: nowrap;
    overflow: hidden;
  }

  @include size(lg) {
    font-size: var(--font-xs);
  }

  @include size(sm) {
    height: var(--h-11);
    font-size: var(--font-xs);
  }
}

.tag-primary {
  color: var(--gray-white);
  background: var(--primary-500);
  &:hover {
    color: var(--gray-white);
    background: var(--primary-400);
  }
  &:focus {
    background: var(--primary-600);
  }

  &.tag-outline {
    color: var(--primary-500);
    background: var(--gray-white);
    border: 1.5px solid var(--primary-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--primary-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--primary-500);
    }
  }

  &.tag-alternative {
    color: var(--primary-500);
    background: var(--primary-50);
    &:hover {
      color: var(--primary-500);
      background: var(--primary-100);
    }
    &:focus {
      background: var(--primary-100);
    }

    &.tag-outline {
      color: var(--primary-500);
      background: var(--gray-white);
      border: 1.5px solid var(--primary-100) !important;
      &:hover {
        color: var(--primary-500);
        background: var(--primary-100);
      }
      &:focus {
        color: var(--gray-white);
        background: var(--primary-100);
      }
    }
  }
}

.tag-secondary {
  color: var(--gray-white);
  background: var(--secondary-500);
  &:hover {
    color: var(--gray-white);
    background: var(--secondary-400);
  }
  &:focus {
    background: var(--secondary-600);
  }

  &.tag-outline {
    color: var(--secondary-500);
    background: var(--gray-white);
    border: 1.5px solid var(--secondary-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--secondary-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--secondary-500);
    }
  }

  &.tag-alternative {
    color: var(--secondary-500);
    background: var(--secondary-50);
    &:hover {
      background: var(--secondary-100);
    }
    &:focus {
      background: var(--secondary-100);
    }

    &.tag-outline {
      color: var(--secondary-500);
      background: var(--gray-white);
      border: 1.5px solid var(--secondary-100) !important;
      &:hover {
        color: var(--secondary-500);
        background: var(--secondary-100);
      }
      &:focus {
        color: var(--secondary-500);
        background: var(--secondary-100);
      }
    }
  }
}

.tag-orange {
  color: var(--gray-white);
  background: var(--orange-500);
  &:hover {
    color: var(--gray-white);
    background: var(--orange-400);
  }
  &:focus {
    background: var(--orange-600);
  }

  &.tag-outline {
    color: var(--orange-500);
    background: var(--gray-white);
    border: 1.5px solid var(--orange-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--orange-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--orange-500);
    }
  }

  &.tag-alternative {
    color: var(--orange-500);
    background: var(--orange-50);
    &:hover {
      background: var(--orange-100);
    }
    &:focus {
      background: var(--orange-50);
    }

    &.tag-outline {
      color: var(--orange-500);
      background: var(--gray-white);
      border: 1.5px solid var(--orange-100) !important;
      &:hover,
      &:focus {
        background: var(--orange-100);
      }
    }
  }
}

.tag-red {
  color: var(--gray-white);
  background: var(--red-500);
  &:hover {
    color: var(--gray-white);
    background: var(--red-400);
  }
  &:focus {
    background: var(--red-600);
  }

  &.tag-outline {
    color: var(--red-500);
    background: var(--gray-white);
    border: 1.5px solid var(--red-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--red-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--red-500);
    }
  }

  &.tag-alternative {
    color: var(--red-500);
    background: var(--red-50);
    &:hover,
    &:focus {
      background: var(--red-100);
    }

    &.tag-outline {
      color: var(--red-500);
      background: var(--gray-white);
      border: 1.5px solid var(--red-50) !important;
      &:hover {
        color: var(--red-500);
        background: var(--red-100);
      }
      &:focus {
        color: var(--gray-white);
        background: var(--red-100);
      }
    }
  }
}

.tag-green-dark {
  color: var(--gray-white);
  background: var(--green-dark-500);
  &:hover {
    color: var(--gray-white);
    background: var(--green-dark-400);
  }
  &:focus {
    background: var(--green-dark-600);
  }

  &.tag-outline {
    color: var(--green-dark-500);
    background: var(--gray-white);
    border: 1.5px solid var(--green-dark-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--green-dark-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--green-dark-500);
    }
  }

  &.tag-alternative {
    color: var(--green-dark-500);
    background: var(--green-dark-50);
    &:hover,
    &:focus {
      background: var(--green-dark-100);
    }

    &.tag-outline {
      color: var(--green-dark-500);
      background: var(--gray-white);
      border: 1.5px solid var(--green-dark-50) !important;
      &:hover {
        color: var(--green-dark-500);
        background: var(--green-dark-100);
      }
      &:focus {
        color: var(--gray-white);
        background: var(--green-dark-100);
      }
    }
  }
}

.tag-gray-dark {
  color: var(--gray-white);
  background: var(--gray-500);
  &:hover,
  &:focus {
    background: var(--gray-600);
  }

  &.tag-outline {
    color: var(--gray-500);
    background: var(--gray-white);
    border: 1.5px solid var(--gray-500) !important;
    &:hover {
      color: var(--gray-white);
      background: var(--gray-400);
    }
    &:focus {
      color: var(--gray-white);
      background: var(--gray-500);
    }
  }

  &.tag-alternative {
    color: var(--gray-500);
    background: var(--gray-50);
    &:hover,
    &:focus {
      background: var(--gray-100);
    }

    &.tag-outline {
      color: var(--gray-500);
      background: var(--gray-white);
      border: 1.5px solid var(--gray-50) !important;
      &:hover {
        color: var(--gray-500);
        background: var(--gray-100);
      }
      &:focus {
        color: var(--gray-white);
        background: var(--gray-100);
      }
    }
  }
}
</style>
