/* eslint-disable */
"use client";
// MUI Imports
// import Grid from '@mui/material/Grid'

// Components Imports
import { useRouter } from 'next/navigation'; // Correct import for App Router

// import Table from '@views/dashboard/Table'
import { useEffect, useState } from 'react'
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { Grid, Stack, Typography } from '@mui/material'


const DashboardAnalytics = () => {
  const router = useRouter(); // Correct hook for App Router
  const [doctorsrows, setDoctorsRows] = useState<any>([]);
  const [patientsrows, setPatientsRows] = useState<any>([]);
  const [categoriesrows, setCategoriesRows] = useState<any>([]);
  const [subcategoriesrows, setSubCategoriesRows] = useState<any>([]);



  useEffect(() => {
    // getDoctors()
    // getPatients()
    // getCategories()
    // getSubCategories()
  }, []);

  const handleRedirect = (path: string) => {
    router.push(path); // Navigate to the manage page
  }

  return (
    <Grid container spacing={6}>
      <Grid item xs={12} md={4}>
        <div onClick={() => handleRedirect('/admin/doctor')} style={{ cursor: 'pointer' }}>
          <Card sx={{ width: '100%' }}>
            <CardContent>
              <Stack direction={'row'} justifyContent={'space-between'}>
                <Typography>Users</Typography>
                <i className="ri-nurse-line text-[26px]"></i>
              </Stack>
              <Typography variant='h4'>{doctorsrows.length}</Typography>
              <Typography variant='caption'>Total Users</Typography>
            </CardContent>
          </Card>
        </div>
      </Grid>

      {/* The rest of your grid items can go here... */}
    </Grid>
  )
}

export default DashboardAnalytics
