import Link from "next/link";

import { Image, Menu as _Menu } from "tiny-ui";

import { useScreenSize } from "components";

const MENU = [
  { url: "/", text: "Automation" },
  { url: "/admin", text: "Administration" }
];

const Menu = ({ page, ...rest }) => {
  const screenSize = useScreenSize();

  let items = MENU?.map((o, i) => (
    <_Menu.Item key={i}>
      <Link href={o?.url}>{o?.text}</Link>
    </_Menu.Item>
  ));
  if (!items) return null;
  if (screenSize?.width < 551)
    items = <_Menu.SubMenu title="Powerline">{items}</_Menu.SubMenu>;
  return (
    <_Menu theme="dark">
      <_Menu.Item>
        <Image src="/logo.webp" width={52} height={40} alt="Hawk Head logo" />
      </_Menu.Item>
      {items}
    </_Menu>
  );
};

export default Menu;