import { Box, Typography, Button } from '@mui/material'
import { Plus } from 'lucide-react'
import { useReminderStore } from '../../stores/reminderStore'

export function ReminderHeader() {
  const { setDrawerOpen, setSelectedId } = useReminderStore()

  function handleCreate() {
    setSelectedId(null)
    setDrawerOpen(true)
  }

  return (
    <Box
      sx={{
        bgcolor: 'white',
        borderBottom: '1px solid',
        borderColor: 'divider',
        px: 3,
        py: 2,
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
      }}
    >
      <Box>
        <Typography variant="h5" sx={{ fontWeight: 700, color: '#1e293b' }}>
          Reminder Manager
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Fristen, Vertragsereignisse und Aufgaben für Ihr Portfolio
        </Typography>
      </Box>
      <Button
        variant="contained"
        size="small"
        startIcon={<Plus size={16} />}
        onClick={handleCreate}
        sx={{ textTransform: 'none', fontWeight: 600 }}
      >
        Reminder erstellen
      </Button>
    </Box>
  )
}