import { Box, Button, Card, CardContent, Typography } from '@mui/material'
import { useNavigate } from 'react-router'

const ACTIONS = [
  { label: 'Objekte verwalten', path: '/supply/properties' },
  { label: 'Match Center', path: '/supply/match-center' },
  { label: 'Marktchancen', path: '/supply/future-availability' },
  { label: 'Datenqualität', path: '/supply/data-quality' },
  { label: 'Review Queue', path: '/ops/review-queue' },
  { label: 'Markt Intelligence', path: '/supply/market-intelligence' },
] as const

export function QuickActionPanel() {
  const navigate = useNavigate()

  return (
    <Card>
      <CardContent sx={{ p: 2.5 }}>
        <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
          Schnellzugriff
        </Typography>
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 1.5,
          }}
        >
          {ACTIONS.map(action => (
            <Button
              key={action.path}
              variant="outlined"
              onClick={() => navigate(action.path)}
              sx={{ justifyContent: 'flex-start', textTransform: 'none' }}
            >
              {action.label}
            </Button>
          ))}
        </Box>
      </CardContent>
    </Card>
  )
}