import { Box, Tooltip, Typography } from '@mui/material'
import { ScoreBar } from './ScoreBar'
import type { ScoreFactor } from '../../domain/match'

interface ScoreBreakdownMiniProps {
  factors: ScoreFactor[]
  maxItems?: number
  showContribution?: boolean
}

export function ScoreBreakdownMini({ factors, maxItems = 5, showContribution = false }: ScoreBreakdownMiniProps) {
  const visible = factors.slice(0, maxItems)
  const overflow = factors.length - maxItems

  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25 }}>
      {visible.map((f, i) => (
        <Tooltip key={i} title={f.explanation} placement="top-start" arrow>
          <Box sx={{ cursor: 'default' }}>
            <ScoreBar
              label={f.criterion}
              value={f.score}
              weight={showContribution ? f.weight : undefined}
            />
          </Box>
        </Tooltip>
      ))}
      {overflow > 0 && (
        <Typography sx={{ fontSize: '0.72rem', color: 'text.disabled' }}>
          +{overflow} weitere Faktoren
        </Typography>
      )}
    </Box>
  )
}
