'use client';

import { Typography, Box, Breadcrumbs, Link } from '@mui/material';
import { Home, Gavel } from '@mui/icons-material';
import { PrayerRequestDataGrid } from '@/components/admin/content/prayer-request-data-grid';

export default function AdminContentPage() {
  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' }}>
          <Gavel sx={{ mr: 0.5 }} fontSize="inherit" />
          Content Moderation
        </Typography>
      </Breadcrumbs>

      {/* Page Header */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Content Moderation
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Review and moderate prayer requests and user-generated content
        </Typography>
      </Box>

      {/* Prayer Request Data Grid */}
      <PrayerRequestDataGrid />
    </Box>
  );
}