<template>
  <v-col
    :cols="xs"
    :sm="sm || xs"
    :md="md || sm || xs"
    :lg="lg || md || sm || xs"
    :xl="xl || lg || md || sm || xs"
    :xxl="xxl || xl || lg || md || sm || xs"
    :class="$attrs.class + ' px-2'"
  >
    {{ label }}
    <v-chip-group
      active-class="primary--text"
      column
      :mandatory="mandatory"
      :name="name"
      :id="name"
    >
      <v-chip filter outlined v-for="(tag, index) in itens" :key="index">
        {{ tag }}
      </v-chip>
    </v-chip-group>
  </v-col>
</template>

<script lang="ts" setup>
defineProps({
  itens: {
    type: Array,
    default: []
  },
  name: {
    type: String,
    requird: true
  },
  mandatory: {
    type: Boolean,
    requird: true
  },
  label: {
    type: String,
    required: true
  },
  xs: { type: String, default: "12" },
  sm: { type: String },
  md: { type: String },
  lg: { type: String },
  xl: { type: String },
  xxl: { type: String }
});
</script>
