import React from 'react'

interface ExampleVariantMetricsTableProps {
  variantMetadatas: Record<string, Record<string, string | number | boolean>>
}

const ExampleVariantMetricsTable: React.FC<ExampleVariantMetricsTableProps> = ({
  variantMetadatas,
}) => {
  const variantKeys = Object.keys(variantMetadatas)
  if (variantKeys.length === 0) return null
  // Collect all unique metadata keys across all variants
  let allKeys = Array.from(
    new Set(variantKeys.flatMap((variant) => Object.keys(variantMetadatas[variant] || {})))
  )
  // Move 'detected' to the front if present
  allKeys = allKeys.filter((k) => k !== 'detected')
  allKeys.unshift('detected')

  return (
    <div className="overflow-x-auto">
      <table className="table w-full min-w-max border-gray-700 border text-xs">
        <thead>
          <tr>
            <th className="bg-base-100 border-gray-700 border">Variant</th>
            {allKeys.map((k) => (
              <th key={k} className="bg-base-100 border-gray-700 border text-center">
                {k}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {variantKeys.map((variant) => (
            <tr key={variant} className="hover:bg-base-100">
              <td className="font-mono border-gray-700 border">{variant}</td>
              {allKeys.map((k) => (
                <td key={k} className="border-gray-700 border text-center">
                  {variantMetadatas[variant] && k in variantMetadatas[variant]
                    ? String(variantMetadatas[variant][k])
                    : ''}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default ExampleVariantMetricsTable