<script setup lang="ts">
import { GrTag } from "@/components";
import { TagVariant } from "@/components/tag/props";

interface TagOption {
  color: TagVariant;
  outline: boolean;
  alternative: boolean;
}

const options: TagOption[] = [
  {
    color: "primary",
    outline: false,
    alternative: false,
  },
  {
    color: "primary",
    outline: true,
    alternative: false,
  },
  {
    color: "primary",
    outline: false,
    alternative: true,
  },
  {
    color: "primary",
    outline: true,
    alternative: true,
  },

  {
    color: "secondary",
    outline: false,
    alternative: false,
  },
  {
    color: "secondary",
    outline: true,
    alternative: false,
  },
  {
    color: "secondary",
    outline: false,
    alternative: true,
  },
  {
    color: "secondary",
    outline: true,
    alternative: true,
  },

  {
    color: "orange",
    outline: false,
    alternative: false,
  },
  {
    color: "orange",
    outline: true,
    alternative: false,
  },
  {
    color: "orange",
    outline: false,
    alternative: true,
  },
  {
    color: "orange",
    outline: true,
    alternative: true,
  },

  {
    color: "red",
    outline: false,
    alternative: false,
  },
  {
    color: "red",
    outline: true,
    alternative: false,
  },
  {
    color: "red",
    outline: false,
    alternative: true,
  },
  {
    color: "red",
    outline: true,
    alternative: true,
  },

  {
    color: "green-dark",
    outline: false,
    alternative: false,
  },
  {
    color: "green-dark",
    outline: true,
    alternative: false,
  },
  {
    color: "green-dark",
    outline: false,
    alternative: true,
  },
  {
    color: "green-dark",
    outline: true,
    alternative: true,
  },

  {
    color: "gray-dark",
    outline: false,
    alternative: false,
  },
  {
    color: "gray-dark",
    outline: true,
    alternative: false,
  },
  {
    color: "gray-dark",
    outline: false,
    alternative: true,
  },
  {
    color: "gray-dark",
    outline: true,
    alternative: true,
  },
];
</script>

<template>
  <div class="container">
    <section class="content">
      <GrTag
        v-for="(option, index) of options"
        :key="index"
        :variant="option.color"
        :outline="option.outline"
        :alternative="option.alternative"
      >
        Minha tag
      </GrTag>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.container {
  max-width: 935px;
  margin: 40px auto;
}

.content {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
}
</style>
