<template>
  <pkt-tag
    :skin="skin"
    :textStyle="textStyle"
    :size="size"
    :closeTag="closeTag"
    :iconName="iconName"
    :type="type"
    :ariaLabel="ariaLabel"
  >
    <slot></slot>
  </pkt-tag>
</template>
<script>
import '@oslokommune/punkt-elements/dist/pkt-tag'
export default {
  name: 'PktTag',
  props: {
    skin: {
      type: String,
      default: 'blue',
      validator(value) {
        return ['blue', 'blue-light', 'blue-dark', 'green', 'red', 'beige', 'yellow', 'grey', 'gray'].includes(value)
      },
    },
    textStyle: {
      type: String,
      default: 'normal-text',
      validator(value) {
        return ['thin-text', 'normal-text'].includes(value)
      },
    },
    size: {
      type: String,
      default: 'medium',
      validator(value) {
        return ['small', 'medium', 'large'].includes(value)
      },
    },
    closeTag: {
      type: Boolean,
      default: false,
    },
    iconName: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'button',
      validator: (value) => ['button', 'submit', 'reset'].includes(value),
    },
    ariaLabel: {
      type: String,
      default: 'close',
    },
  },
}
</script>
