<script lang="ts" setup>
const {
	count = 1,
	height,
	width,
	borderRadius = 'var(--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(--skeleton-margin);
}

.skeleton {
	background-color: var(--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(--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>
