'use client';

import { DEV_TASK_STATUS_LABEL, DEV_TASK_STATUS_COLOR } from '@/lib/dev-task';
import type { DevTaskStatus } from '@/lib/dev-task';

export function StatusBadge({ status, widthEm }: { status: DevTaskStatus; widthEm?: number }) {
  return (
    <span
      className={`inline-flex h-5 shrink-0 items-center justify-center whitespace-nowrap rounded px-1.5 text-[10px] font-medium ${DEV_TASK_STATUS_COLOR[status]}`}
      style={widthEm ? { width: `${widthEm}em` } : undefined}
    >
      {DEV_TASK_STATUS_LABEL[status]}
    </span>
  );
}
