import { Typography, Box, Breadcrumbs, Link } from '@mui/material';
import { Home } from '@mui/icons-material';
import { OverviewCards } from '@/components/admin/dashboard/overview-cards';

export default function AdminDashboard() {
  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">Dashboard</Typography>
      </Breadcrumbs>

      {/* Page Header */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Dashboard Overview
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Monitor key metrics and system performance for Biblical Guide
        </Typography>
      </Box>

      {/* Overview Cards */}
      <OverviewCards />

      {/* Recent Activity Section - Placeholder for future implementation */}
      <Box sx={{ mt: 4 }}>
        <Typography variant="h6" gutterBottom>
          Recent Activity
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Activity feed will be implemented in Phase 2
        </Typography>
      </Box>
    </Box>
  );
}