import { VerdictBadge, type Verdict } from './VerdictBadge'

export interface CriterionRowProps {
  id: string
  text: string
  verdict: Verdict
  evidence?: string | null
  reachedAt?: string | null
}

/** One acceptance-criterion row: id, verdict pill, text, optional evidence subline, reached-at date. */
export function CriterionRow({ id, text, verdict, evidence, reachedAt }: CriterionRowProps) {
  return (
    <div className="flex flex-col gap-1 py-2">
      <div className="flex items-center gap-2">
        <span className="font-mono text-[11px] text-fg-subtle">{id}</span>
        <VerdictBadge verdict={verdict} />
        <span className="text-[12.5px]">{text}</span>
        <span className="ml-auto text-[11px] text-fg-subtle">{reachedAt ?? '—'}</span>
      </div>
      {evidence != null ? <div className="text-[11px] text-fg-subtle">{evidence}</div> : null}
    </div>
  )
}