import { Box, Typography } from '@mui/material'
import type { ReminderPriority } from '../../domain/reminder'

const CONFIG: Record<ReminderPriority, { color: string; label: string }> = {
  URGENT: { color: '#dc2626', label: 'Dringend' },
  HIGH:   { color: '#ea580c', label: 'Hoch' },
  MEDIUM: { color: '#ca8a04', label: 'Mittel' },
  LOW:    { color: '#94a3b8', label: 'Niedrig' },
}

interface Props {
  priority: ReminderPriority
}

export function ReminderPriorityBadge({ priority }: Props) {
  const { color, label } = CONFIG[priority]
  return (
    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.6 }}>
      <Box sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: color, flexShrink: 0 }} />
      <Typography sx={{ color, fontWeight: 600, fontSize: '0.7rem', lineHeight: 1, whiteSpace: 'nowrap' }}>
        {label}
      </Typography>
    </Box>
  )
}