Styled Card - Copy this React, Mui Component to your project

import React from "react"; import { Dialog, DialogTitle, DialogContent, Typography, Divider, Box, } from "@mui/material"; import { useSelector } from "react-redux"; const ProfileModal = ({ open, handleClose }) => { const { userDetail } = useSelector((state) => state.user); // Get userDetail from Redux store const client = userDetail || {}; return ( <Dialog open={open} onClose={handleClose} fullWidth maxWidth="sm"> <DialogTitle>Profile Details</DialogTitle> <DialogContent> <Box> <Typography variant="h6">Client Information</Typography> <Divider /> <Typography><strong>Full Name:</strong> {client.fullName || "N/A"}</Typography> <Typography><strong>Username:</strong> {client.username || "N/A"}</Typography> <Typography><strong>Client ID:</strong> {client.id || "N/A"}</Typography> <Typography><strong>Country:</strong> {client.country || "N/A"}</Typography> <Typography><strong>Email:</strong> {client.email || "N/A"}</Typography> <Typography><strong>Address:</strong> {client.address || "N/A"}</Typography> <Divider style={{ margin: "10px 0" }} /> <Typography variant="h6">Other Information</Typography> <Divider /> <Typography><strong>Company Name:</strong> {client.companyName || "N/A"}</Typography> </Box> </DialogContent> </Dialog> ); }; export default ProfileModal; i want a header and deatils in a beadutiful manner