import { memo } from 'react'
import type { ReactNode } from 'react'
import { TableCell, TableRow } from '@mui/material'
import { LABEL_SX, DATA_SX } from './compareUtils'

// ── Props ─────────────────────────────────────────────────────────────────────

export interface CompareMetricRowProps {
  label: string
  cells: ReactNode[]
}

// ── Component ─────────────────────────────────────────────────────────────────

export const CompareMetricRow = memo(function CompareMetricRow({ label, cells }: CompareMetricRowProps) {
  return (
    <TableRow hover>
      <TableCell sx={LABEL_SX}>{label}</TableCell>
      {cells.map((cell, i) => (
        <TableCell key={i} sx={DATA_SX}>{cell}</TableCell>
      ))}
    </TableRow>
  )
})