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

interface CriticalFieldWarningProps {
  fields: string[]
  warnings?: string[]
}

export function CriticalFieldWarning({ fields, warnings = [] }: CriticalFieldWarningProps) {
  if (fields.length === 0 && warnings.length === 0) return null

  return (
    <Box sx={{ mb: 2 }}>
      {fields.length > 0 && (
        <Alert severity="error" sx={{ mb: 1, py: 0.5, px: 1.5 }}>
          <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>
            {fields.length} Pflichtfeld{fields.length > 1 ? 'er' : ''} fehlen — Match-Qualität reduziert
          </Typography>
          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
            {fields.map(f => (
              <Chip key={f} label={f} size="small" color="error" variant="outlined"
                sx={{ height: 18, fontSize: '0.65rem' }} />
            ))}
          </Box>
        </Alert>
      )}
      {warnings.map((w, i) => (
        <Alert key={i} severity="warning" sx={{ mb: 0.5, py: 0.25, px: 1.5, fontSize: '0.8125rem' }}>
          {w}
        </Alert>
      ))}
    </Box>
  )
}