import { Box, Typography } from '@mui/material'
import { styles } from '../style'
import { CategoryBar } from './category-bar'
import type { CategoryWidgetConfig } from '../types'

export interface CategoryRowSingleProps {
  name: string
  value: number
  maxValue: number
  color: string
  formatter: NonNullable<CategoryWidgetConfig['formatter']>
  labelFormatter?: CategoryWidgetConfig['labelFormatter']
  onClick?: CategoryWidgetConfig['onRowClick']
  selected?: boolean
}

/**
 * Renders a single-series category row with a label, formatted value, and proportional bar.
 */
export function CategoryRowSingle({
  name,
  value,
  maxValue,
  color,
  formatter,
  labelFormatter,
  onClick,
  selected = true,
}: CategoryRowSingleProps) {
  const handleClick = onClick
    ? () =>
        onClick({
          name,
        })
    : undefined
  const rowStyle = onClick ? styles.rowClickable : styles.row

  return (
    <Box sx={rowStyle} onClick={handleClick}>
      <Box sx={styles.rowHeader}>
        <Typography sx={styles.rowLabel}>
          {labelFormatter ? labelFormatter(name) : name}
        </Typography>
        <Typography sx={styles.rowValue}>{formatter(value)}</Typography>
      </Box>
      <CategoryBar
        value={value}
        maxValue={maxValue}
        color={color}
        selected={selected}
      />
    </Box>
  )
}