'use client';

import { TEST_CASE_STATUS_LABEL, TEST_CASE_STATUS_COLOR } from '@/lib/test-case';
import type { TestCaseStatus } from '@/lib/test-case';

export function TestCaseStatusBadge({ status, widthEm }: { status: TestCaseStatus; 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 ${TEST_CASE_STATUS_COLOR[status]}`}
      style={widthEm ? { width: `${widthEm}em` } : undefined}
    >
      {TEST_CASE_STATUS_LABEL[status]}
    </span>
  );
}