@props([
    'type' => 'card', // card, text, circle, chart, table
    'count' => 1,
    'height' => null
])

@for($i = 0; $i < $count; $i++)
    <div {{ $attributes->merge(['class' => 'kmc-skeleton kmc-skeleton--' . $type]) }} @if($height) style="height: {{ $height }}" @endif>
        @if($type === 'card')
            <div class="kmc-skeleton__header loading-shimmer"></div>
            <div class="kmc-skeleton__body">
                <div class="kmc-skeleton__line loading-shimmer"></div>
                <div class="kmc-skeleton__line loading-shimmer"></div>
                <div class="kmc-skeleton__line kmc-skeleton__line--short loading-shimmer"></div>
            </div>
        @elseif($type === 'text')
            <div class="kmc-skeleton__line loading-shimmer"></div>
        @elseif($type === 'circle')
            <div class="kmc-skeleton__circle loading-shimmer"></div>
        @elseif($type === 'chart')
            <div class="kmc-skeleton__chart">
                <div class="kmc-skeleton__bar loading-shimmer" style="height: 60%"></div>
                <div class="kmc-skeleton__bar loading-shimmer" style="height: 80%"></div>
                <div class="kmc-skeleton__bar loading-shimmer" style="height: 45%"></div>
                <div class="kmc-skeleton__bar loading-shimmer" style="height: 90%"></div>
                <div class="kmc-skeleton__bar loading-shimmer" style="height: 70%"></div>
            </div>
        @elseif($type === 'table')
            <div class="kmc-skeleton__table">
                <div class="kmc-skeleton__table-row loading-shimmer"></div>
                <div class="kmc-skeleton__table-row loading-shimmer"></div>
                <div class="kmc-skeleton__table-row loading-shimmer"></div>
            </div>
        @endif
    </div>
@endfor