import { useState } from 'react'
import { Badge, IconButton, Popover, Typography } from '@mui/material'
import { Bell } from 'lucide-react'

export function NotificationButton() {
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)

  function handleOpen(e: React.MouseEvent<HTMLElement>) {
    setAnchorEl(e.currentTarget)
  }

  function handleClose() {
    setAnchorEl(null)
  }

  return (
    <>
      <IconButton size="small" sx={{ color: '#64748b' }} onClick={handleOpen}>
        <Badge badgeContent={0} color="error">
          <Bell size={20} />
        </Badge>
      </IconButton>

      <Popover
        open={!!anchorEl}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        slotProps={{ paper: { sx: { width: 280, p: 2 } } }}
      >
        <Typography variant="subtitle2" sx={{ mb: 1 }}>Benachrichtigungen</Typography>
        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
          Keine neuen Benachrichtigungen
        </Typography>
      </Popover>
    </>
  )
}