<script lang="ts" setup>
defineOptions({ name: 'BglSkeleton' })
const {
	count = 1,
	height,
	width,
	borderRadius = 'var(--bgl-skeleton-radius)',
	round = false,
	class: className = '',
} = defineProps<{
	count?: number | string
	height?: string
	width?: string
	round?: boolean
	borderRadius?: string
	class?: string
}>()
import type { SetupContext } from 'vue'
import { useSlots } from 'vue'

const slots: SetupContext['slots'] = useSlots()
</script>

<template>
	<template v-for="i in +count" :key="i">
		<div v-if="slots.default" class="skeleton-wrap" :class="className">
			<slot />
		</div>
		<div v-else class="skeleton" :style="{ height, width, borderRadius }" :class="{ round, [className as string]: true }" />
	</template>
</template>

<style scoped>

.skeleton-wrap {
margin-bottom: var(--bgl-skeleton-margin);
}

.skeleton {
background-color: var(--bgl-skeleton-bg);
border-radius: var(--bg-card-radius);
margin-bottom: 0.25em;
position: relative;
overflow: hidden;
}

.skeleton::before {
content: "";
background: linear-gradient(90deg, transparent 20%, var(--bgl-skeleton-pulse) 50%, transparent 80%);
animation: loadingAnimation 1s ease-in-out infinite;
position: absolute;
inset: 0px;
transform: translateX(-100%);
}

@keyframes loadingAnimation {
to {
    transform: translateX(100%);
}
}

</style>
