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

export interface CategoryBarProps {
  /** Numeric value driving the fill width. */
  value: number
  /** Denominator for the percentage fill. `0` → empty bar (no division by zero). */
  maxValue: number
  /** Fill color. Honors any CSS color or MUI theme token. */
  color: string
  /**
   * Visual density. `'small'` (default) keeps the historical 4px pill;
   * `'medium'` renders a 12px-tall track with a 2px corner radius. Only
   * the bar track + fill change — every other token in the parent row is
   * size-invariant.
   */
  size?: CategorySize
}

/**
 * Single horizontal bar (track + proportional fill). Pure presentation.
 * Selection / dimming live at the row level; this component is unaware of
 * both — bars stay vivid regardless of selection state (per the v2
 * "row-bg + row-dim, never muted bar" rule).
 */
export function CategoryBar({
  value,
  maxValue,
  color,
  size = 'small',
}: CategoryBarProps) {
  const pct = maxValue > 0 ? (value / maxValue) * 100 : 0
  // Width + color rendered as inline `style` (not `sx`) to avoid
  // generating a new emotion class for every distinct value/color pair
  // — also makes the rendered DOM testable without computed-style math.
  return (
    <Box sx={styles.bar[size]} data-size={size}>
      <Box
        sx={styles.barFill[size]}
        style={{ width: `${pct}%`, backgroundColor: color }}
        // Tag the fill so an ancestor row's `:hover` selector can target
        // it (`&:hover [data-bar-fill]`) — the brightening affordance now
        // fires from anywhere in the row, not only the bar track.
        data-bar-fill='true'
      />
    </Box>
  )
}