import { Box, Typography, Button } from '@mui/material'
import { BellOff } from 'lucide-react'

interface Props {
  onReset?: () => void
}

export function ReminderEmptyState({ onReset }: Props) {
  return (
    <Box
      sx={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        py: 10,
        gap: 2,
      }}
    >
      <Box
        sx={{
          width: 64,
          height: 64,
          borderRadius: '50%',
          bgcolor: '#f1f5f9',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <BellOff size={28} color="#94a3b8" />
      </Box>
      <Box sx={{ textAlign: 'center' }}>
        <Typography variant="h6" sx={{ fontWeight: 600, color: '#1e293b', mb: 0.5 }}>
          Keine Reminder
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Keine Reminder entsprechen dem aktuellen Filter.
        </Typography>
      </Box>
      {onReset && (
        <Button variant="outlined" size="small" onClick={onReset} sx={{ textTransform: 'none' }}>
          Filter zurücksetzen
        </Button>
      )}
    </Box>
  )
}
