import { Box, type SxProps, type Theme } from '@mui/material'
import type { ReactNode } from 'react'

export interface TableLabels {
  selectAll: string
  selectRow: (rowId: string | number) => string
  rowsPerPage: string
  /**
   * Renders the displayed-rows summary in the pagination footer. Returns
   * a `ReactNode` so the default can emphasise the active range
   * (`from-to`) with a bolder weight while keeping the trailing
   * ` of total` muted. Override to localise wording or restyle.
   */
  paginationOf: (from: number, to: number, total: number) => ReactNode
  /** aria-label for the first-page pagination button. */
  firstPage: string
  /** aria-label for the previous-page pagination button. */
  previousPage: string
  /** aria-label for the next-page pagination button. */
  nextPage: string
  /** aria-label for the last-page pagination button. */
  lastPage: string
}

const boldRange: SxProps<Theme> = { fontWeight: 600, color: 'text.primary' }

export const DEFAULT_TABLE_LABELS: TableLabels = {
  selectAll: 'Select all rows',
  selectRow: (id) => `Select row ${id}`,
  rowsPerPage: 'Rows per page:',
  paginationOf: (from, to, total) => (
    <>
      <Box component='span' sx={boldRange}>{`${from}–${to}`}</Box>
      {` of ${total}`}
    </>
  ),
  firstPage: 'First page',
  previousPage: 'Previous page',
  nextPage: 'Next page',
  lastPage: 'Last page',
}