import React, { useContext } from "react";
import { Layout, Popover, Button } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { TokenContext } from "auth/useAuth";

import styles from "./Page.module.scss";

export function Page({ children }: { children: React.ReactNode }) {
  const { token, logout } = useContext(TokenContext);
  return (
    <Layout className={styles.layout}>
      <Layout.Header className={styles.header}>
        <div className={styles.logo}>KHUDrive</div>
        <Popover
          content={
            <div>
              {token?.user.name}
              <Button type="link" onClick={logout}>
                로그아웃
              </Button>
            </div>
          }
          trigger="click"
        >
          <Button type="text" className={styles.user}>
            <UserOutlined />
          </Button>
        </Popover>
      </Layout.Header>
      <Layout.Content className={styles.content}>{children}</Layout.Content>
      <Layout.Footer className={styles.footer}>
        © 2020 Cloud Computing Team C
      </Layout.Footer>
    </Layout>
  );
}