'use client';

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

interface Props {
  status: RequirementStatus;
}

const STATUS_STYLES: Record<RequirementStatus, { bg: string; text: string; dot: string }> = {
  [RequirementStatus.DRAFT]: {
    bg: 'bg-[var(--line-soft)]',
    text: 'text-[var(--ink-soft)]',
    dot: 'bg-[var(--ink-muted)]',
  },
  [RequirementStatus.REVIEWING]: {
    bg: 'bg-blue-50',
    text: 'text-blue-700',
    dot: 'bg-blue-500',
  },
  [RequirementStatus.APPROVED]: {
    bg: 'bg-emerald-50',
    text: 'text-emerald-700',
    dot: 'bg-emerald-500',
  },
  [RequirementStatus.REJECTED]: {
    bg: 'bg-red-50',
    text: 'text-red-700',
    dot: 'bg-red-500',
  },
  [RequirementStatus.DELIVERED]: {
    bg: 'bg-purple-50',
    text: 'text-purple-700',
    dot: 'bg-purple-500',
  },
};

export function RequirementStatusBadge({ status }: Props) {
  const style = STATUS_STYLES[status];
  return (
    <span
      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium ${style.bg} ${style.text}`}
    >
      <span className={`h-1.5 w-1.5 rounded-full ${style.dot}`} />
      {REQUIREMENT_STATUS_LABEL[status]}
    </span>
  );
}