<script lang="ts">
    // Tiny percent bar reused by the phase progress + per-chapter page
    // progress in the admin crawler dashboard. Was an inline `{#snippet}`
    // before; extracted so the per-component tables can use it too.
    let { percent }: { percent: number } = $props();
</script>

<div class="bar" role="progressbar" aria-valuenow={percent} aria-valuemin="0" aria-valuemax="100">
    <div class="fill" style:width="{Math.min(100, Math.max(0, percent))}%"></div>
    <span class="label">{percent.toFixed(0)}%</span>
</div>

<style>
    .bar {
        position: relative;
        background: var(--surface-elevated);
        border-radius: var(--radius-sm, 4px);
        height: 1.5rem;
        margin: var(--space-2) 0;
        overflow: hidden;
    }
    .fill {
        height: 100%;
        background: #22c55e;
        transition: width 0.3s ease;
    }
    .label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: var(--font-xs);
        font-weight: var(--weight-semibold);
    }
</style>
