import { Box, Typography } from '@mui/material'
import { styles } from '../style'

export interface CategoryRowOtherProps {
  hiddenCount: number
  otherLabel?: string
  otherCountLabel?: string
}

/**
 * Renders an "Other" summary row indicating how many additional categories are hidden beyond `maxItems`.
 */
export function CategoryRowOther({
  hiddenCount,
  otherLabel = 'Other',
  otherCountLabel = '{count} more',
}: CategoryRowOtherProps) {
  const countText = otherCountLabel.replace('{count}', String(hiddenCount))

  return (
    <Box sx={styles.otherRow}>
      <Typography sx={styles.otherLabel}>{otherLabel}</Typography>
      <Typography sx={styles.otherCount}>({countText})</Typography>
    </Box>
  )
}