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

export function SignalQualityDots({ quality }: { quality: 'HIGH' | 'MEDIUM' | 'LOW' | undefined }) {
  const config = {
    HIGH:   { dots: [1, 1, 1, 1], color: '#1a7a4a', label: 'Hohe Signalqualität' },
    MEDIUM: { dots: [1, 1, 1, 0], color: '#d97706', label: 'Mittlere Signalqualität' },
    LOW:    { dots: [1, 1, 0, 0], color: '#c0392b', label: 'Niedrige Signalqualität' },
  }
  const c = quality ? config[quality] : config.LOW
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
      {c.dots.map((filled, i) => (
        <Box key={i} sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: filled ? c.color : '#e8e7e4' }} />
      ))}
      <Typography sx={{ fontSize: '0.68rem', color: c.color, fontWeight: 600, ml: 0.25 }}>
        {c.label}
      </Typography>
    </Box>
  )
}