<!--
  Task 8: Skeleton loader component for data fetching states.
  Renders a shimmering placeholder in any size/shape.
-->
<script lang="ts">
	interface Props {
		class?: string;
		width?: string;
		height?: string;
		rounded?: boolean;
	}

	const {
		class: className = '',
		width = '100%',
		height = '1rem',
		rounded = false
	}: Props = $props();
</script>

<div
	class="skeleton {className}"
	style="width: {width}; height: {height}; {rounded ? 'border-radius: 9999px;' : ''}"
	aria-hidden="true"
></div>
