<template>
	<component
		:is="link ? `a` : `button`"
		class="btn"
		:class="classes"
		:href="link"
	>
		<component
			:is="icon"
			v-if="icon"
			class="btn-icon"
			:class="[iconColor]"
		/>
		<div>
			<slot />
		</div>
		<component
			:is="iconRight"
			v-if="iconRight"
			class="btn-icon"
			:class="[iconColor]"
		/>
	</component>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Component } from 'vue'

const props = defineProps<{
	color?: '' | 'green' | 'blue' | 'red'
	link?: string
	text?: boolean
	// Expecting Vue Components
	icon?: Component
	iconRight?: Component
	iconColor?: string
}>()

const classes = computed(() => {
	let classes = []
	if (props.color) classes.push(props.color)
	if (props.text) classes.push('text')
	return classes
})
</script>

<style scoped>
.btn {
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	line-height: 1.5;
	@apply px-3 py-1 mx-1 my-2 bg-white rounded-md !no-underline !shadow-md !hover:shadow-sm !focus:shadow-sm !active:shadow-none border !cursor-pointer border-box;
	@apply text-true-gray-500 hover:text-true-gray-600 focus:text-true-gray-600 active:text-true-gray-800;
	@apply !inline-flex justify-center items-center;
	@apply transition-colors;
}

.btn.text {
	@apply !bg-transparent border-none !shadow-none !hover:shadow-none !hover:bg-light-50 !hover:bg-opacity-5 !hover:shadow-md;
}

button.btn {
	@apply align-bottom;
}

.dark .btn {
	@apply bg-true-gray-900;
}
.green {
	@apply text-green-500 hover:text-green-600 focus:text-green-600 active:text-green-800;
}
.blue {
	@apply text-blue-500 hover:text-blue-600 focus:text-blue-600 active:text-blue-800;
}
.red {
	@apply text-red-500 hover:text-red-600 focus:text-red-600 active:text-red-800;
}

.default {
	@apply text-dark-500 hover:text-dark-600 focus:text-dark-600 active:text-dark-800;
}

.dark .default {
	@apply text-light-500 hover:text-light-600 focus:text-light-600 active:text-light-800;
}

.btn-icon {
	fill: currentColor !important;
}

.btn-icon:first-child {
	@apply mr-2;
}

.btn-icon:last-child {
	@apply ml-2;
}
</style>
