<script lang="ts">
  import { getBlinkVisible } from '../blink-store.svelte.ts';

  type DotStatus = 'running' | 'idle' | 'done' | 'error' | 'stalled' | 'inactive';

  interface Props {
    status: DotStatus;
    /** Dot diameter in rem. Default 0.625. */
    size?: number;
  }

  let { status, size = 0.625 }: Props = $props();

  // Read blink state from global store — NOT from parent prop.
  // This prevents cascading re-renders of the entire ProjectCard tree.
</script>

<span
  class="status-dot {status}"
  class:blink-off={status === 'running' && !getBlinkVisible()}
  style="width: {size}rem; height: {size}rem;"
  role="img"
  aria-label={status}
></span>

<style>
  .status-dot {
    display: inline-block;
    border-radius: 50%;
    background: var(--ctp-overlay0);
    flex-shrink: 0;
    transition: opacity 0.15s;
  }

  .status-dot.running  { background: var(--ctp-green); }
  .status-dot.idle     { background: var(--ctp-overlay1); }
  .status-dot.done     { background: var(--ctp-green); }
  .status-dot.error    { background: var(--ctp-red); }
  .status-dot.stalled  { background: var(--ctp-peach); }
  .status-dot.inactive { background: var(--ctp-overlay0); }

  .status-dot.blink-off { opacity: 0.3; }
</style>
