<script lang="ts">
  interface Props {
    lastActivity: string;
    remainingSeconds: number;
  }

  let { lastActivity, remainingSeconds }: Props = $props();

  function formatTime(seconds: number): string {
    const m = Math.floor(seconds / 60);
    const s = seconds % 60;
    return `${m}:${String(s).padStart(2, '0')}`;
  }

  function formatDate(iso: string): string {
    return new Date(iso).toLocaleTimeString();
  }
</script>

<div class="card">
  <h2>Idle Timer</h2>
  <div class="timer-display">
    <span class="time">{formatTime(remainingSeconds)}</span>
    <span class="label">until idle check</span>
  </div>
  <p class="last-activity">Last activity: {formatDate(lastActivity)}</p>
</div>

<style>
  .timer-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  .time {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .last-activity {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    text-align: center;
  }
</style>
