'use client';

import { RequirementStatus } from '@ftb/shared';
import { REQUIREMENT_STATUS_LABEL } from '@/lib/constants';

interface Props {
  status: RequirementStatus;
}

const STATUS_STYLES: Record<RequirementStatus, string> = {
  [RequirementStatus.DRAFT]: 'bg-zinc-100 text-zinc-700 ring-zinc-200',
  [RequirementStatus.REVIEWING]: 'bg-blue-50 text-blue-700 ring-blue-200',
  [RequirementStatus.APPROVED]: 'bg-emerald-50 text-emerald-700 ring-emerald-200',
  [RequirementStatus.REJECTED]: 'bg-red-50 text-red-700 ring-red-200',
  [RequirementStatus.DELIVERED]: 'bg-violet-50 text-violet-700 ring-violet-200',
};

export function RequirementStatusBadge({ status }: Props) {
  return (
    <span
      className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium ring-1 ring-inset ${STATUS_STYLES[status]}`}
    >
      {REQUIREMENT_STATUS_LABEL[status]}
    </span>
  );
}