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

const props = defineProps<{
	label?: string
	thin?: boolean
	outline?: boolean
	h100?: boolean
	to?: string
	href?: string
	overflowX?: boolean
	overflowY?: boolean
	frame?: boolean
	bg?:
		| 'gray'
		| 'light'
		| 'dark'
		| 'primary'
		| 'secondary'
		| 'success'
		| 'danger'
		| 'warning'
		| 'info'
		| 'white'
		| 'transparent'
}>()

const bind = computed(() => {
	const obj: { [key: string]: any } = {}
	if (props.href !== undefined && props.href !== '') { obj.href = props.href }
	else if (props.to !== undefined && props.to !== '') { obj.to = props.to }
	return obj
})

const is = computed(() => {
	if (props.href !== undefined && props.href !== '') { return 'a' }
	if (props.to !== undefined && props.to !== '') { return 'router-link' }
	return 'div'
})
</script>

<template>
	<component
		:is="is" v-ripple="!!to" v-bind="bind" class="bgl_card" :class="{
			thin,
			'border': outline,
			'h-100': h100,
			[bg || '']: bg,
			'overflow-x': overflowX,
			'overflow-y': overflowY,
			'card_frame': frame,
		}"
	>
		<span v-if="label" class="card_label">
			{{ label }}
		</span>
		<slot />
	</component>
</template>

<style>
.card_frame {
	border: 1px solid var(--border-color);
}
.card_label {
	font-size: 1rem;
	position: relative;
	top: -0.5rem;
	padding: 0.75rem 0;
	display: block;
	border-bottom: 1px solid var(--border-color);
	margin-bottom: 1rem;
}

.border .card_label {
	font-size: 0.7rem;
	font-weight: 300;
	background: var(--bgl-box-bg);
	padding: 0 0.75rem;
	position: absolute;
	top: -0.5rem;
	inset-inline-start: 1rem;
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	border-bottom: unset;

}

.bgl_card {
	border-radius: var(--card-border-radius);
	background: var(--bgl-box-bg);
	padding: 2rem 2rem;
	position: relative;
}

.bgl_card.gray {
	background: var(--bgl-gray-tint);
}

.bgl_card.border {
	border: 1px solid var(--border-color);
	background-color: transparent;
}

.bgl_card.thin {
	padding: 1rem 1rem;
}

.bgl_card.BagelTable {
	height: 100%;
	overflow: auto;
	padding-top: 0;
}

.bgl_card.thin .tabs {
	margin-bottom: 1rem;
}

.bgl_card .bgl_card.tabs-top {
	padding: 0;
}
</style>
