import { PureComponent } from 'react';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import BarChartIcon from '@mui/icons-material/BarChart';
import { PanelTile } from 'dashgui/panels';

export default class StatisticsPage extends PureComponent {
  render() {
    return (
      <PanelTile title="Statistik">
        <Box
          sx={{
            py: 8,
            px: 2,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'text.secondary',
            textAlign: 'center',
            gap: 1.5,
          }}
        >
          <BarChartIcon sx={{ fontSize: 48, opacity: 0.4 }} />
          <Typography variant="h6" color="text.primary" fontWeight={600}>
            Statistik & Auswertungen
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ maxWidth: 420 }}>
            Hier entstehen demnächst grafische Auswertungen, Umsatzstatistiken und
            Bestandskennzahlen.
          </Typography>
        </Box>
      </PanelTile>
    );
  }
}