<script lang="ts">
  import { onMount } from "svelte";

  let duration = $state(300);
  let elapsed = $state(0);
  let elapsedSec = $derived((Math.min(elapsed, duration) / 10).toFixed(1));

  onMount(() => {
    const interval = setInterval(() => {
      if (elapsed < duration) elapsed++;
    }, 100);
    return () => {
      clearInterval(interval);
    };
  });
</script>

<div class="card card-border shadow-xl w-96 mx-auto">
  <div class="card-body">
    <h2 class="card-title">4. Timer</h2>
    <div class="grid grid-cols-[min-content_auto] gap-2">
      <p class="text-nowrap">Elapsed Time:</p>
      <progress class="progress my-1 h-auto" value={elapsed} max={duration}></progress>
      <p class="col-span-2">{elapsedSec}s</p>
      <p>Duration:</p>
      <input type="range" class="range range-xs" min="0" max="300" bind:value={duration}/>
    </div>
    <div class="card-actions">
      <button class="btn btn-block btn-sm">Reset</button>
    </div>
  </div>
</div>