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 #e8e7e4',
        px: 3,
        py: 2.5,
        display: 'flex',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
      }}
    >
      <Box>
        <Typography sx={{ fontWeight: 700, fontSize: '1.125rem', lineHeight: 1.3, color: '#0f172a' }}>
          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>
  )
}
