components/BenchmarkTable.tsx

import { InterpretationReport } from '@/lib/types'

interface BenchmarkTableProps {
  alignment: InterpretationReport['benchmarkAlignment']
}

const bandStyles: Record<string, string> = {
  elite: 'bg-green-100 text-green-800',
  high: 'bg-blue-100 text-blue-800',
  medium: 'bg-yellow-100 text-yellow-800',
  low: 'bg-red-100 text-red-800',
}

const bandLabels: Record<string, string> = {
  elite: 'Elite',
  high: 'High',
  medium: 'Medium',
  low: 'Low',
}

export default function BenchmarkTable({ alignment }: BenchmarkTableProps) {
  return (
    <div className="overflow-x-auto rounded-lg border border-gray-200">
      <table className="min-w-full divide-y divide-gray-200 text-sm">
        <thead className="bg-gray-50">
          <tr>
            <th className="px-4 py-3 text-left font-semibold text-gray-600">Metric</th>
            <th className="px-4 py-3 text-left font-semibold text-gray-600">Your Value</th>
            <th className="px-4 py-3 text-left font-semibold text-gray-600">Benchmark Range</th>
            <th className="px-4 py-3 text-left font-semibold text-gray-600">Performance Band</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100 bg-white">
          {alignment.map((row) => (
            <tr key={row.metric} className="hover:bg-gray-50">
              <td className="px-4 py-3 font-medium text-gray-900">{row.metric}</td>
              <td className="px-4 py-3 text-gray-700">{row.yourValue}</td>
              <td className="px-4 py-3 text-gray-700">{row.typicalRange}</td>
              <td className="px-4 py-3">
                <span
                  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${bandStyles[row.band] ?? ''}`}
                >
                  {bandLabels[row.band] ?? row.band}
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}