import * as React from 'react'

export interface QualityScore {
  score: number
  grade: 'A' | 'B' | 'C' | 'D' | 'F'
}

export interface QualityBadgeProps {
  quality: QualityScore
  showScore?: boolean
}

const GRADE_STYLES: Record<QualityScore['grade'], string> = {
  A: 'bg-green-100 text-green-800 border-green-200',
  B: 'bg-blue-100 text-blue-800 border-blue-200',
  C: 'bg-yellow-100 text-yellow-800 border-yellow-200',
  D: 'bg-orange-100 text-orange-800 border-orange-200',
  F: 'bg-red-100 text-red-800 border-red-200',
}

const GRADE_LABELS: Record<QualityScore['grade'], string> = {
  A: 'Excellent',
  B: 'Good',
  C: 'Fair',
  D: 'Poor',
  F: 'Incomplete',
}

export function QualityBadge({ quality, showScore = false }: QualityBadgeProps) {
  const { grade, score } = quality
  const styleClass = GRADE_STYLES[grade]
  const label = GRADE_LABELS[grade]

  return (
    <span
      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold border ${styleClass}`}
      title={`Data quality: ${label} (${score}/100)`}
    >
      <span>{grade}</span>
      {showScore && <span className="font-normal opacity-75">({score})</span>}
    </span>
  )
}