//Eknoor singh
//date:- 12-Feb-2025
//Made a special page for showing the profile details

import { useEffect } from "react";
import {
	Container,
	Typography,
	CircularProgress,
	Card,
	CardContent,
	Grid,
	Avatar,
	Box,
} from "@mui/material";

import { useDispatch, useSelector } from "react-redux";
import { AppDispatch, RootState } from "../../redux/store/store";
import { fetchAdminProfile } from "../../redux/slices/profileSlice";

const ProfilePage = () => {
	//Eknoor singh
	//date:- 12-Feb-2025
	//Dispatch is called and user, isLoading, and error from Authstate Interface
	const dispatch = useDispatch<AppDispatch>();
	const { user, isLoading } = useSelector(
		(state: RootState) => state?.profileReducer
	);

	useEffect(() => {
		dispatch(fetchAdminProfile());
	}, [dispatch]);

	if (isLoading) {
		return (
			<Box
				sx={{
					display: "flex",
					justifyContent: "center",
					alignItems: "center",
					height: "100vh",
				}}
			>
				<CircularProgress />
			</Box>
		);
	}

	return (
		<Container sx={{ py: 4 }}>
			<Typography variant="h4" gutterBottom>
				Profile
			</Typography>
			<Card sx={{ maxWidth: 600, margin: "0 auto" }}>
				<CardContent>
					<Grid container spacing={2} alignItems="center">
						<Grid item>
							<Avatar
								
								alt={user?.name || "User Avatar"}
								src={"/static/images/avatar/7.jpg"}
								sx={{ width: 80, height: 80 }}
							/>
						</Grid>
						<Grid item xs>
							<Typography variant="h6">
								{user?.name || "N/A"}
							</Typography>
							<Typography variant="body2" color="text.secondary">
								Email: {user?.email || "N/A"}
							</Typography>
							<Typography variant="body2" color="text.secondary">
								Phone: {user?.phone || "N/A"}
							</Typography>
							<Typography variant="body2" color="text.secondary">
								Role: <b>{user?.userType || "N/A"}</b>
							</Typography>
						</Grid>
					</Grid>
				</CardContent>
			</Card>
		</Container>
	);
};

export default ProfilePage;
