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

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

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

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

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

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