import Link from "next/link";
import { useRouter } from "next/router";
import React, { ReactNode } from "react";

import { Image } from "@/components/Image";

import Content from "../../../content/advice/coop-advice.mdx";

import styles from "./coop.module.css";

export default function CoopAdvice() {
  return (
    <Advice>
      <Content />
    </Advice>
  );
}

export function Advice(props: { children: ReactNode }) {
  const router = useRouter();
  const path = router.pathname;
  return (
    <>
      <div className={styles.titleContainer}>
        <h1 className={styles.title}>Waterloo Undergraduate Advice</h1>
        <Image src="/resources/advice/codey.svg" className={styles.codey} />
      </div>
      <div className={styles.adviceBarContainer}>
        <Link href="/resources/advice/coop">
          <a
            className={
              path == "/resources/advice/coop" ? styles.currentAdvice : ""
            }
          >
            Coop Advice
          </a>
        </Link>
        <Link href="/resources/advice/academic">
          <a
            className={
              path == "/resources/advice/academic" ? styles.currentAdvice : ""
            }
          >
            Academic Advice
          </a>
        </Link>
        <Link href="/resources/advice/misc">
          <a
            className={
              path == "/resources/advice/misc" ? styles.currentAdvice : ""
            }
          >
            Additional Resources
          </a>
        </Link>
      </div>
      <div className={styles.content}>{props.children}</div>
    </>
  );
}