'use client';

import { Typography, Box, Breadcrumbs, Link } from '@mui/material';
import { Home, Settings } from '@mui/icons-material';
import { SystemDashboard } from '@/components/admin/system/system-dashboard';

export default function AdminSettingsPage() {
  return (
    <Box>
      {/* Breadcrumbs */}
      <Breadcrumbs aria-label="breadcrumb" sx={{ mb: 3 }}>
        <Link
          underline="hover"
          sx={{ display: 'flex', alignItems: 'center' }}
          color="inherit"
          href="/admin"
        >
          <Home sx={{ mr: 0.5 }} fontSize="inherit" />
          Admin
        </Link>
        <Typography color="text.primary" sx={{ display: 'flex', alignItems: 'center' }}>
          <Settings sx={{ mr: 0.5 }} fontSize="inherit" />
          System Administration
        </Typography>
      </Breadcrumbs>

      {/* Page Header */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          System Administration
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Monitor system health, manage backups, and configure platform settings
        </Typography>
      </Box>

      {/* System Dashboard */}
      <SystemDashboard />
    </Box>
  );
}