import type { JSX } from "react"
import { TableRow } from "../Table"

interface TableRowProps {
  row: any
  rowClassName?: string | ((row: any) => string)
  renderDataCell: (cell: any) => React.ReactNode
}

export function TableRowComponent({
  row,
  rowClassName,
  renderDataCell,
}: TableRowProps): JSX.Element {
  const rowCls = typeof rowClassName === "function" ? rowClassName(row) : rowClassName

  return (
    <TableRow key={row.id} data-state={row.getIsSelected() && "selected"} className={rowCls}>
      {row.getVisibleCells().map(renderDataCell)}
    </TableRow>
  )
}