content: import PropTypes from 'prop-types'
  import React from 'react'
  import {js} from 'tocco-util'
  
  import {Typography} from '../index'
  import {columnPropType, rowDataPropType} from './propTypes'
  import {StyledTableCell} from './StyledComponents'
  
  const StaticCell = React.memo(({column, rowData, rowIdx}) => (
    <StyledTableCell data-cy="list-cell">
      {column.CellRenderer ? (
        <column.CellRenderer rowData={rowData} column={column} rowIdx={rowIdx} />
      ) : (
        <Typography.Span>{rowData[column.id]}</Typography.Span>
      )}
    </StyledTableCell>
  ))
  
  StaticCell.propTypes = {
    rowData: rowDataPropType.isRequired,
    column: columnPropType.isRequired,
    rowIdx: PropTypes.number
  }
  
  const areEqual = (prevProps, nextProps) => {
    if (!prevProps.column.dynamic) {
      return true
    }
    const diff = Object.keys(js.difference(prevProps, nextProps))
    return diff.length === 0
  }
  
  export default React.memo(StaticCell, areEqual)
  