import "./TopMenu.scss";
import HansotImage from "./assets/h1_logo.png";
import { useMemo } from "react";

type MenuItem = { name: string; url: string };
type Menu = (MenuItem & { children: MenuItem[] })[];

const menus: Menu = [
  {
    name: "BRAND",
    url: "#none",
    children: [
      {
        name: "브랜드 스토리",
        url: "#none",
      },
      {
        name: "브랜드 철학",
        url: "#none",
      },
      {
        name: "브랜드 유산",
        url: "#none",
      },
    ],
  },
  {
    name: "ESG",
    url: "#none",
    children: [
      {
        name: "한솥ESG경영",
        url: "#none",
      },
      {
        name: "세계 40대 브랜드 선정",
        url: "#none",
      },
    ],
  },
  {
    name: "MENU",
    url: "#none",
    children: [
      {
        name: "전체메뉴",
        url: "#none",
      },
      {
        name: "식재료 이야기",
        url: "#none",
      },
      {
        name: "페루찬차마요커피",
        url: "#none",
      },
      {
        name: "단체주문",
        url: "#none",
      },
    ],
  },
  {
    name: "STORE",
    url: "#none",
    children: [
      {
        name: "주변점포찾기",
        url: "#none",
      },
    ],
  },
  {
    name: "EVENT",
    url: "#none",
    children: [
      {
        name: "이 달의 이벤트",
        url: "#none",
      },
      {
        name: "신규점 오픈이벤트",
        url: "#none",
      },
    ],
  },
  {
    name: "FRANCHISE",
    url: "#none",
    children: [
      {
        name: "한솥 창업",
        url: "#none",
      },
    ],
  },
  {
    name: "HANSOT",
    url: "#none",
    children: [
      {
        name: "한솥의 약속",
        url: "#none",
      },
      {
        name: "한솥의 비전",
        url: "#none",
      },
      {
        name: "연혁&수상",
        url: "#none",
      },
      {
        name: "한솥 NEWS",
        url: "#none",
      },
      {
        name: "오시는 길",
        url: "#none",
      },
      {
        name: "고객센터",
        url: "#none",
      },
    ],
  },
  {
    name: "RECRUIT",
    url: "#none",
    children: [
      {
        name: "조직문화",
        url: "#none",
      },
      {
        name: "인사제도",
        url: "#none",
      },
      {
        name: "채용정보",
        url: "#none",
      },
      {
        name: "직무소개",
        url: "#none",
      },
      {
        name: "입사지원",
        url: "#none",
      },
    ],
  },
];

export default function TopMenu(): React.ReactElement {
  const menuObject = useMemo(
    () => (
      <>
        {...menus.map((menu) => (
          <div className="list-item">
            <a className="list-link" href={menu.url}>
              <p className="list-text">{menu.name}</p>
            </a>
            <div className="sub-list">
              {...menu.children.map((submenu) => (
                <a className="sub-item" href={submenu.url}>
                  <p className="sub-text">{submenu.name}</p>
                </a>
              ))}
            </div>
          </div>
        ))}
      </>
    ),
    menus
  );

  return (
    <div className="outter">
      <header className="top-menu container">
        <div className="sub-background"></div>
        <a className="logo" href="#">
          <img className="logo-icon" src={HansotImage} alt="한솥" />
        </a>
        <div className="list">{menuObject}</div>
      </header>
    </div>
  );
}
