<script setup>
const props = defineProps({
  width: { type: String, default: 'full' },
  height: { type: String, default: '4' },
  rounded: { type: String, default: 'md' },
});

const widthClasses = {
  full: 'w-full',
  '3/4': 'w-3/4',
  '2/3': 'w-2/3',
  '1/2': 'w-1/2',
  '1/3': 'w-1/3',
  '1/4': 'w-1/4',
  '1/5': 'w-1/5',
  auto: 'w-auto',
};

const heightClasses = {
  2: 'h-2',
  3: 'h-3',
  4: 'h-4',
  5: 'h-5',
  6: 'h-6',
  8: 'h-8',
  12: 'h-12',
};

const roundedClasses = {
  none: 'rounded-none',
  sm: 'rounded-sm',
  md: 'rounded-md',
  lg: 'rounded-lg',
  full: 'rounded-full',
};
</script>

<template>
  <div
    class="animate-pulse bg-gray-200"
    :class="[
      widthClasses[width] || width,
      heightClasses[height] || height,
      roundedClasses[rounded] || rounded,
    ]"
  ></div>
</template>


