import React, { useState } from "react";
import EllipsisIcon from "../../icons/ellipsis";
import ProfileDropdown from "./ProfileDropdown";
import styles from "./styles.module.css";
import useIsMobile from "@/app/hooks/useIsMobile";
const Profile = () => {
  const isMobile = useIsMobile();
  const [open, setOpen] = useState(false);
  const [user, setUser] = useState("");
  const sampleData = [
    {
      name: "JM Grills",
      role: "Super Admin",
    },
  ];

  return (
    <>
      {/* Profile Section */}
      <div className={styles.profileContainer}>
        {/* Profile */}
        {!isMobile && (
          <div className={styles.profileBadge} onClick={() => setOpen(!open)}>
            {/* Username and Role*/}
            {sampleData.map((data, index) => {
              return (
                <div className={styles.nameRole} key={index}>
                  <p className={styles.userName}>{data.name}</p>
                  <p className={styles.userRole}>{data.role}</p>
                </div>
              );
            })}

            {/* User profile*/}
            <div className={styles.userImgContainer}>
              <div className={styles.userPic}></div>
              <EllipsisIcon />
            </div>
          </div>
        )}

        {/* Mobile Ellipsis */}
        {isMobile && (
          <div
            className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
            onClick={() => setOpen(!open)}
          >
            <EllipsisIcon style={isMobile ? styles.rotated : ""} />
          </div>
        )}

        {/* Dropdown */}
        {open && <ProfileDropdown isMobile={isMobile} user={sampleData[0]} />}
      </div>
    </>
  );
};

export default Profile;
