import React from "react";
import styles from "./styles.module.css";
import SettingsIcon from "../../icons/settings";
import LogoutIcon from "../../icons/logout";

const ProfileDropdown = ({ isMobile, user }) => {
  return (
    <div className={styles.dropdownContainer}>
      {/* Settings */}

      {/* Mobile View */}
      {isMobile && (
        <>
          {" "}
          <div className={styles.profileBadge}>
            {/* User profile*/}
            <div className={styles.userImgContainer}>
              <div className={styles.userPic}></div>
            </div>

            {/* Username and Role*/}
            <div className={styles.nameRole}>
              <p className={styles.userName}>{user.name}</p>
              <p className={styles.userRole}>{user.role}</p>
            </div>
          </div>
          <div className={styles.divider}></div>
        </>
      )}

      <div className={styles.settingsBtn}>
        {/* Icon */}
        <div className={styles.btn}>
          <SettingsIcon />
        </div>
        <p>Settings</p>
      </div>
      {/* Logout */}
      <div className={styles.logoutBtn}>
        {/* Icon */}
        <div className={styles.btn}>
          <LogoutIcon />
        </div>
        <p>Logout</p>
      </div>
    </div>
  );
};

export default ProfileDropdown;