import React, { useState } from "react";
import style from "./index.module.css";
import {
  CloseOutlined,
  LogoutOutlined,
  ManageAccountsOutlined,
  MarkunreadOutlined,
  RemoveShoppingCartOutlined,
  ShoppingBagOutlined,
} from "@mui/icons-material";
import { useRouter } from "next/router";
import Head from "next/head";

const Profile = () => {
  const router = useRouter();
  const [menu] = useState([
    {
      name: "My Orders",
      path: "/account/orders",
      icon: <ShoppingBagOutlined />,
    },
    {
      name: "My Return",
      path: "/account/returned",
      icon: <RemoveShoppingCartOutlined />,
    },
    {
      name: "My Cancelation",
      path: "/account/canceled",
      icon: <CloseOutlined />,
    },
    { name: "Address", path: "/account/address", icon: <MarkunreadOutlined /> },
    {
      name: "Profile",
      path: "/account/profile",
      icon: <ManageAccountsOutlined />,
    },
    {
      name: "Logout",
      path: "/logout",
      icon: <LogoutOutlined />,
    },
  ]);

  return (
    <React.Fragment>
      <Head>
        <title>Account</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      </Head>
      <div className={style.menu_section}>
        <div className={style.section_data}>
          <div className={style.selectBox}>
            {menu.map((item) => (
              <div
                className={style.menu_box}
                key={item.name}
                onClick={() => router.push(item.path)}
              >
                {item.icon}
                {item.name}
              </div>
            ))}
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};

export default Profile;
