import type { Task } from '../../types';
import { getDonutDisplay } from '../../lib/taskStatusVisual';

export function DonutGauge({ task }: { task: Pick<Task, 'status' | 'progress'> }) {
  const display = getDonutDisplay(task);

  return (
    <div
      className="donut"
      style={{
        ['--pct' as string]: display.pct,
        ['--color' as string]: display.ringColor,
      }}
      aria-label={display.ariaLabel}
    >
      <span style={{ color: display.labelColor }}>{display.label}</span>
    </div>
  );
}
