import React from "react";
import {
  DocumentationIcon,
  HelpIcon,
  HomeIcon,
  LogoutIcon,
  NotificationIcon,
  ProjectsIcon,
  TutorialsIcon,
} from "../../icons/DashboardIcon";
import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";

const SidePannel: React.FC = () => {
  const userName = localStorage.getItem("userName") ?? "Anonymous";
  return (
    <div className="side-pannel-container">
      <div className="side-pannel-header">
        <div className="user-container">
          <div className="user-profile">{userName[0]}</div>
          <div className="user-name">{userName}</div>
        </div>
        <div className="notifications-container">
          <NotificationIcon />
        </div>
      </div>
      <div className="new-project-button">+ New project</div>
      <div className="side-bar-content-container">
        <div className="side-bar-options-container">
          <div className="option-list active">
            <HomeIcon />
            Home
          </div>
          <div className="option-list" title="coming soon">
            <ProjectsIcon />
            Projects
          </div>
          <div className="option-list" title="coming soon">
            <TrashIcon />
            Trash
          </div>
          <div className="option-list" title="coming soon">
            <TutorialsIcon />
            Tutorials
          </div>
          <div className="option-list" title="coming soon">
            <DocumentationIcon />
            Documentation
          </div>
        </div>
        <div className="side-bar-options-container" title="coming soon">
          <div className="option-list">
            <SettingsIcon />
            Settings
          </div>
          <div className="option-list" style={{cursor: "pointer"}}>
            <LogoutIcon />
            Log out
          </div>
          <div className="option-list">
            <HelpIcon />
            Help & Feedback
          </div>
        </div>
      </div>
    </div>
  );
};

export default SidePannel;