import { Grid, useMediaQuery, useTheme } from '@mui/material';
import { useQuery } from '@tanstack/react-query';
import CircularLoader from 'components/CircularLoader';
import Loader from 'components/Loader';
import MainCard from 'components/MainCard';
import { getusers } from 'pages/api/api';

const ViewProfile = () => {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const {
    data: userdata,
    isLoading,
    isError,
    error
  } = useQuery({
    queryKey: ['getuser'],
    queryFn: getusers
  });
  return (
    <>
      {isLoading && (
        <>
          <Loader />
          <CircularLoader />
        </>
      )}
      <MainCard sx={{ p: { xs: 1.5, md: 3 } }}>
        <Grid container spacing={isMobile ? 2 : 3}>
          <Grid item xs={12} sm={6} md={4}>
            {userdata?.firstname}
          </Grid>
          <Grid item xs={12} sm={6} md={4}>
            {' '}
          </Grid>
          <Grid item xs={12} sm={6} md={4}>
            {' '}
          </Grid>
        </Grid>
      </MainCard>
    </>
  );
};

export default ViewProfile;