<script>
  let { totalSeconds = 0, remainingSeconds = 0, size = 48 } = $props();

  let progress = $derived(totalSeconds > 0 ? remainingSeconds / totalSeconds : 0);
  let radius = $derived((size - 6) / 2);
  let circumference = $derived(2 * Math.PI * radius);
  let dashOffset = $derived(circumference * (1 - progress));
</script>

<svg width={size} height={size} class="transform -rotate-90" aria-hidden="true">
  <!-- Background ring -->
  <circle
    cx={size / 2}
    cy={size / 2}
    r={radius}
    fill="none"
    stroke="var(--color-border-subtle)"
    stroke-width="3"
  />
  <!-- Progress ring -->
  <circle
    cx={size / 2}
    cy={size / 2}
    r={radius}
    fill="none"
    stroke="var(--color-accent)"
    stroke-width="3"
    stroke-linecap="round"
    stroke-dasharray={circumference}
    stroke-dashoffset={dashOffset}
    style="transition: stroke-dashoffset var(--duration-decorative) ease-out"
  />
</svg>
