import { TableRow as MuiTableRow, TableCell, Checkbox } from '@mui/material'
import type { RowProps } from '../types'
import { Cell } from './cell'

/**
 * Table row component with selection and hover support
 */
export function Row({
  row,
  columns,
  isSelected = false,
  selectable = false,
  onClick,
  onSelect,
  onMouseEnter,
  onMouseLeave,
}: RowProps) {
  const handleClick = () => {
    onClick?.(row)
  }

  const handleCheckboxClick = (event: React.MouseEvent) => {
    event.stopPropagation()
    onSelect?.(row)
  }

  const handleMouseEnter = () => {
    onMouseEnter?.(row)
  }

  const handleMouseLeave = () => {
    onMouseLeave?.()
  }

  return (
    <MuiTableRow
      hover={!!onMouseEnter || !!onMouseLeave || !!onClick}
      selected={isSelected}
      onClick={handleClick}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      sx={{
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      {selectable && (
        <TableCell padding='checkbox'>
          <Checkbox
            checked={isSelected}
            onClick={handleCheckboxClick}
            inputProps={{ 'aria-label': `select row ${row.id}` }}
          />
        </TableCell>
      )}
      {columns.map((column) => (
        <Cell
          key={column.id}
          row={row}
          column={column}
          value={row[column.id]}
        />
      ))}
    </MuiTableRow>
  )
}