'use client';

import { Typography, Box, Breadcrumbs, Link } from '@mui/material';
import { Home, People } from '@mui/icons-material';
import { UserDataGrid } from '@/components/admin/users/user-data-grid';

export default function AdminUsersPage() {
  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' }}>
          <People sx={{ mr: 0.5 }} fontSize="inherit" />
          Users
        </Typography>
      </Breadcrumbs>

      {/* Page Header */}
      <Box sx={{ mb: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          User Management
        </Typography>
        <Typography variant="body1" color="text.secondary">
          Manage user accounts, roles, and permissions
        </Typography>
      </Box>

      {/* User Data Grid */}
      <UserDataGrid />
    </Box>
  );
}