import React, { FC } from "react";
import styles from "./global-layout.module.css";
import Image from "next/image";
import Link from "next/link";
import classnames from 'classnames';

const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;

interface Props {
  className: string;
}

export const GlobalSidebar: FC<Props> = ({className}) => {

  return (
    <aside className={classnames(className, styles.sidebar)}>
      <img className={styles.avatar} src="/images/avatar.png" />
      <h2 className={styles.name}>{fullName}</h2>

      <nav className={styles.nav}>
        <ul>
          <Link href="/">
            <li className={styles.navItem}>文章</li>
          </Link>
          <Link href="/tags">
            <li className={styles.navItem}>标签</li>
          </Link>
          <Link href="/about">
            <li className={styles.navItem}>关于</li>
          </Link>
        </ul>
      </nav>
      <footer className={classnames(styles.bio, "md:block hidden")}>
        {"“人造的身体，借来的心”"}
      </footer>
      <footer className={classnames(styles.bio, "md:hidden block")}>
        {"好挤 (#`O′)"}
      </footer>
    </aside>
  );
};