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

defineOptions({
  name: 'ASkeleton'
})
type Variant = 'circle' | 'square'

interface Props {
  width?: string
  height: string
  variant?: Variant
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'square',
  width: '100%'
})

const styles = computed(() => {
  const style = {
    '--skeleton-height': props.height,
    '--skeleton-width': props.width,
    '--skeleton-radius': props.variant === 'square' ? '4px' : '50%'
  }
  return style
})
</script>

<template>
  <div
    class="skeleton-loader animate-pulse bg-gray-300 dark:bg-gray-800"
    :style="styles"
  />
</template>

<style scoped>
.skeleton-loader {
  width: var(--skeleton-width);
  height: var(--skeleton-height);
  border-radius: var(--skeleton-radius);
}

</style>
