import React from "react";
import userDashboardStyle from "./styles.module.css";

const HomePage = () => {
  return (
    // Main
    <div className={userDashboardStyle.mainWrapper}>
      <div className={userDashboardStyle.mainContainer}>
        <div className={userDashboardStyle.userDashContainer}>
          {/* User Name */}
          <div className={userDashboardStyle.userNameContainer}>
            {/* Name and Welcome Msg */}
            <div className={userDashboardStyle.nameSection}>
              {/* Weather */}
              <div className={userDashboardStyle.weather}>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width={24}
                  height={24}
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M8 12C8 13.0609 8.42143 14.0783 9.17157 14.8284C9.92172 15.5786 10.9391 16 12 16C13.0609 16 14.0783 15.5786 14.8284 14.8284C15.5786 14.0783 16 13.0609 16 12C16 10.9391 15.5786 9.92172 14.8284 9.17157C14.0783 8.42143 13.0609 8 12 8C10.9391 8 9.92172 8.42143 9.17157 9.17157C8.42143 9.92172 8 10.9391 8 12Z"
                    stroke="white"
                    strokeWidth={1.5}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M3 12H4M12 3V4M20 12H21M12 20V21M5.6 5.6L6.3 6.3M18.4 5.6L17.7 6.3M17.7 17.7L18.4 18.4M6.3 17.7L5.6 18.4"
                    stroke="white"
                    strokeWidth={1.5}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                <p>
                  Friday, Feb 23
                  <span className={userDashboardStyle.ordinal}>rd</span>
                </p>
              </div>
              {/* Name */}
              <div className={userDashboardStyle.name}>
                <p className={userDashboardStyle.welcomeGreet}>Hi, Grills!</p>
                <p className={userDashboardStyle.welcomeMsg}>
                  Welcome to the ISAAC IDP!
                </p>
              </div>
            </div>
            {/* Logo */}
            <div className={userDashboardStyle.logoSection}>
              <div className={userDashboardStyle.gradientGlass}></div>
            </div>
          </div>
          {/* Link */}
          <div className={userDashboardStyle.linkMainContainer}>
            <div className={userDashboardStyle.linkContainer}>
              <div className={userDashboardStyle.link}>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width={24}
                  height={24}
                  viewBox="0 0 24 24"
                  fill="none"
                >
                  <path
                    d="M9 15L15 9"
                    stroke="#969AF9"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M11 6.00031L11.463 5.46431C12.4008 4.52663 13.6727 3.99991 14.9989 4C16.325 4.00009 17.5968 4.527 18.5345 5.46481C19.4722 6.40261 19.9989 7.6745 19.9988 9.00066C19.9987 10.3268 19.4718 11.5986 18.534 12.5363L18 13.0003"
                    stroke="#969AF9"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                  <path
                    d="M13.0001 18L12.6031 18.534C11.6544 19.4722 10.3739 19.9984 9.03964 19.9984C7.70535 19.9984 6.42489 19.4722 5.47614 18.534C5.0085 18.0716 4.63724 17.521 4.38385 16.9141C4.13047 16.3073 4 15.6561 4 14.9985C4 14.3408 4.13047 13.6897 4.38385 13.0829C4.63724 12.476 5.0085 11.9254 5.47614 11.463L6.00014 11"
                    stroke="#969AF9"
                    strokeWidth={2}
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </svg>
                <p>Connected to https://isaac.dev.onecoopbank.com</p>
              </div>
            </div>
          </div>
          {/* Extra Space */}
          <div></div>
        </div>
      </div>
    </div>
  );
};

export default HomePage;