import Footer from "./Footer";
import Navbar from "./Navbar";
import { useSelector } from "react-redux";


const Dashboard = () => {

    const { user } = useSelector((state) => ({ ...state.auth }));


    return (

        <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>

            <Navbar />
            <br /> <br /> <br /> <br />

            <main style={{ flex: 1 }}>
                <section
                    className="py-19 py-md-5 py-xl-8"
                    style={{ backgroundColor: "#FFFFFF" }}
                >



                    <div className="container-fluid px-0">

                        <div className="row gy-4 align-items-center justify-content-center ">
                            <div className="col-12 col-md-6 col-xl-20 text-center text-md-start">
                                <div className="text-bg-primary">
                                    <div className="px-4">
                                        <hr className="border-primary-subtle mb-4" />
                                        <p className="lead mb-5">
                                            A beautiful, easy-to-use, and secure Investor Portal that
                                            gives your investors everything they may need
                                        </p>
                                    </div>
                                </div>
                            </div>



                            <div className="col-12 col-md-6 col-xl-5">
                                <div
                                    className="card border-0 rounded-4 shadow-lg"
                                    style={{ width: "100%" }}
                                >
                                    <div className="card-body p-3 p-md-4 p-xl-5">
                                        {user?.result?._id && (
                                            <div className="form-group row">
                                                <label htmlFor="firstName" className="col-sm-6 col-form-label">
                                                    First Name:{" "}
                                                    <span style={{ color: "#067ADC" }}>{user.result.firstName}</span>
                                                </label>
                                                <label htmlFor="middleName" className="col-sm-6 col-form-label">
                                                    Middle Name:{" "}
                                                    <span style={{ color: "#067ADC" }}>{user.result.middleName}</span>
                                                </label>
                                                <label htmlFor="lastName" className="col-sm-6 col-form-label">
                                                    Last Name:{" "}
                                                    <span style={{ color: "#067ADC" }}>{user.result.lastName}</span>
                                                </label>
                                                <label htmlFor="email" className="col-sm-6 col-form-label">
                                                    Email:{" "}
                                                    <span style={{ color: "#067ADC" }}>{user.result.email}</span>
                                                </label>
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <Footer />
        </div>
    );
};

export default Dashboard;