"use client";

import React from "react";
import userDashboardStyle from "./styles.module.css";
import LinkIcon from "../components/icons/link";
import SunIcon from "../components/icons/sun";
import Link from "next/link";
import useIsMobile from "../hooks/useIsMobile";
const HomePage = () => {
  const isMobile = useIsMobile();
  return (
    // Main
    <div className={userDashboardStyle.mainWrapper}>
      <div className={userDashboardStyle.mainContainer}>
        <div className={userDashboardStyle.userDashContainer}>
          {/* User Name */}
          <div className={userDashboardStyle.userNameContainer}>
            {/* Name and Welcome Msg Section */}
            <div className={userDashboardStyle.nameSection}>
              {/* Weather */}
              <div className={userDashboardStyle.weather}>
                <SunIcon />
                <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>
            {/* Image Section*/}
            <div className={userDashboardStyle.logoSection}>
              <div className={userDashboardStyle.gradientGlass}></div>
            </div>
          </div>
          {/* Link */}
          <div className={userDashboardStyle.linkMainContainer}>
            <div className={userDashboardStyle.linkContainer}>
              <div className={userDashboardStyle.link}>
                <div className={userDashboardStyle.linkIcon}>
                  {isMobile ? (
                    <LinkIcon color="#D2D3E1" width="18" height="18" />
                  ) : (
                    <LinkIcon />
                  )}
                  <p>Connected to</p>
                </div>
                <Link href="#">https://isaac.dev.onecoopbank.com</Link>
              </div>
            </div>
          </div>
          {/* Extra Space */}
          <div></div>
        </div>
      </div>
    </div>
  );
};

export default HomePage;
