'use client';

import { Suspense } from 'react';
import DashboardLayout from '../../../src/features/dashboard/components/DashboardLayout';
import ProfilePage from '../../../src/features/profile/components/ProfilePage';
import { CircularProgress, Box, Typography } from '@mui/material';

function ProfileContent() {
  return (
    <DashboardLayout>
      <Box sx={{ p: 4 }}>
        <Typography variant="h4" fontWeight="700" mb={3}>
          Perfil do Usuário
        </Typography>
        <ProfilePage />
      </Box>
    </DashboardLayout>
  );
}

export default function ProfilePageRoute() {
  return (
    <Suspense
      fallback={
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            minHeight: '100vh',
          }}
        >
          <CircularProgress />
        </Box>
      }
    >
      <ProfileContent />
    </Suspense>
  );
}