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

export interface CategoryBarProps {
  value: number
  maxValue: number
  color: string
  selected?: boolean
}

/**
 * Renders a single horizontal bar fill proportional to its value relative to the maximum.
 */
export function CategoryBar({
  value,
  maxValue,
  color,
  selected = true,
}: CategoryBarProps) {
  const percentage = maxValue > 0 ? (value / maxValue) * 100 : 0

  const barFillSx = selected
    ? { ...styles.barFill, width: `${percentage}%`, backgroundColor: color }
    : { ...styles.barFill, ...styles.barFillMuted, width: `${percentage}%` }

  return (
    <Box sx={styles.bar}>
      <Box sx={barFillSx} />
    </Box>
  )
}