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

    const props = withDefaults(
        defineProps<{
            width?: string;
            height?: string;
            borderRadius?: string;
            animated?: boolean;
        }>(),
        {
            width: '100%',
            height: '16px',
            borderRadius: '8px',
            animated: true,
        },
    );

    const style = computed(() => ({
        width: props.width,
        height: props.height,
        borderRadius: props.borderRadius,
    }));
</script>

<template>
    <span
        class="ui-skeleton"
        :class="{ 'ui-skeleton--animated': animated }"
        :style="style"
        aria-hidden="true"
    />
</template>

<style lang="scss" scoped>
    .ui-skeleton {
        display: block;
        flex-shrink: 0;
        background: var(--gray-100, #f0f2f5);

        &--animated {
            position: relative;
            overflow: hidden;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                transform: translateX(-100%);
                background: linear-gradient(
                    90deg,
                    rgb(255 255 255 / 0%) 0%,
                    rgb(255 255 255 / 55%) 50%,
                    rgb(255 255 255 / 0%) 100%
                );
                animation: ui-skeleton-shimmer 1.2s ease-in-out infinite;
            }
        }
    }

    @keyframes ui-skeleton-shimmer {
        100% {
            transform: translateX(100%);
        }
    }
</style>
