<template lang="pug">
	component.inline-block.relative.font-700.o-btn(
		:is="tag"
		:type="componentType"
		:class="componentClass"
		@click="$emit('click', $event)"
		:to="to"
		:disabled="tag == 'button' && disabled"
	)
		span.block.py-1.py-2.px-5.o-btn__inner(tabindex="-1")
			span.inline-block.align-middle
				// @slot child of the button
				slot

			// @slot icon container + element
			slot(name="icon")
				span.inline-block.align-middle.o-btn__icon(v-if="isTextOnly")
					// @slot icon element
					slot(name="icon-element")
						Icon(name="chevron-right24")

</template>

<script>
import Icon from '@/components/Icon'
export default {
	props: {
		/**
		 * The tag of the button component
		 * @values button, a
		 */
		tag: {
			type: String,
			default: 'button',
		},
		/**
		 * Specifically used in conjunction with vue-router
		 */
		to: {
			type: [String, Object],
			default: null,
		},
		/**
		 * The variant of the button
		 * @values primary, secondary
		 */
		variant: {
			type: String,
			default: 'primary',
		},
		/**
		 * Disabled state of the button
		 */
		disabled: Boolean,
		/**
		 * If you want to show text only button style
		 */
		isTextOnly: Boolean,
	},
	components: {
		Icon,
	},
	computed: {
		componentType() {
			return !this.tag || this.tag === 'button' ? 'button' : false
		},
		componentClass() {
			const { tag, variant, disabled, isTextOnly } = this
			return {
				'border border-2 border-primary bg-primary text-white hover-text-white':
					variant == 'primary' && !isTextOnly,
				'border border-2 border-primary bg-transparent text-primary hover-text-primary hover-bg-transparent':
					variant == 'secondary' && !isTextOnly,
				'bg-transparent is-textonly': isTextOnly,
				'text-primary': variant == 'primary' && isTextOnly,
				'o-btn--primary': variant == 'primary',
				'o-btn--secondary': variant == 'secondary',
				'is-link': tag == 'a',
				'is-disabled': disabled,
			}
		},
	},
}
</script>

<docs>
```jsx
<Button>Primary</Button>
<br>
<br>
<Button variant="secondary">Secondary</Button>
<br>
<br>
<!-- Link button-styled -->
<Button tag="a" href="https://www.google.com" target="_blank">Google</Button>
<!--/ Link button-styled -->
<br>
<br>
<!-- Text only -->
<Button
	isTextOnly
>
	<template v-slot:default>Text only button</template>
	<template v-slot:icon-element>
	<Icon name="chevron-right24" path="/spritemap.svg" />
</template>
</Button>
<!--/ Text only -->
```
</docs>
