import React from "react";
import styles from "styles/app.module.scss";
import { getFilteredMenus } from "./utils";
import logo from "../../assets/images/OMS_logo_black.svg";
import ac from "../../assets/images/account_circle.svg";
import { LoginedPaths } from "./types";
import { HEADER_NAME } from "./constants";

interface HeaderProps {
  name: string;
  activePath: LoginedPaths;
}

// ログイン後のヘッダー
const LoginedHeader: React.FC<HeaderProps> = (props: HeaderProps) => {
  const { name, activePath } = props;
  const filterMenus = getFilteredMenus();
  return (
    <header className={styles.header}>
      <div className={styles.headerLogo}>
        <img src={logo} alt="OM System" />
      </div>
      <div className={styles.headerSub}>{HEADER_NAME}</div>
      <div className={styles.headerMenu}>
        <ul>
          {filterMenus.map((x) => (
            <li key={x.label}>
              <a
                href={x.path}
                className={
                  activePath.toUpperCase() === x.path.toUpperCase()
                    ? styles.isActive
                    : ""
                }
              >
                {x.label}
              </a>
            </li>
          ))}
        </ul>
        <p className={styles.accountInfo}>
          <img src={ac} alt="" className={styles.accountIcon} />

          <span>{name}</span>
        </p>
      </div>
    </header>
  );
};
export default LoginedHeader;
