import { Box, Typography } from '@mui/material'
import { CheckCircle, MousePointer, ShieldOff } from 'lucide-react'

interface ReviewEmptyStateProps {
  variant: 'empty-queue' | 'no-selection' | 'no-permission'
}

const CONFIG = {
  'empty-queue': {
    icon: CheckCircle,
    color: '#1a7a4a',
    title: 'Keine ausstehenden Reviews',
    desc: 'Alle Aufgaben wurden bearbeitet. Gute Arbeit.',
  },
  'no-selection': {
    icon: MousePointer,
    color: '#94a3b8',
    title: 'Aufgabe wählen',
    desc: 'Klicken Sie auf eine Aufgabe in der Liste, um Details und Aktionen anzuzeigen.',
  },
  'no-permission': {
    icon: ShieldOff,
    color: '#c0392b',
    title: 'Kein Zugriff',
    desc: 'Sie haben keine Berechtigung, Review-Aufgaben zu bearbeiten.',
  },
}

export function ReviewEmptyState({ variant }: ReviewEmptyStateProps) {
  const { icon: Icon, color, title, desc } = CONFIG[variant]
  return (
    <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', minHeight: 200, p: 4, textAlign: 'center' }}>
      <Icon size={40} color={color} style={{ marginBottom: 12, opacity: 0.7 }} />
      <Typography variant="subtitle2" sx={{ fontWeight: 700, mb: 0.5, color: '#1e293b' }}>{title}</Typography>
      <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 280 }}>{desc}</Typography>
    </Box>
  )
}