import { useEffect } from "react";
import Footer from "./Footer";
import Navbar from "./Navbar";
import { useDispatch, useSelector } from "react-redux";
import { showUser } from "../redux/features/userSlice";



const Dashboard = () => {

  const { user } = useSelector((state) => ({ ...state.auth }));
  const dispatch = useDispatch();
  const userId = user?.result?._id;

  useEffect(() => {
    if (userId) {
      dispatch(showUser(userId));
    }
  }, [userId, dispatch]);

  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="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;