import React from "react";

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

export function About() {
  return (
    <div className={styles.aboutWrapper}>
      <AngleDecoration isBottom={false} />
      <section className={styles.about}>
        <aside>
          <h1>About the Programs</h1>
          <p>Getting an overview of the CS programs in UW</p>
        </aside>
        <article>
          <h4>Computer Science</h4>
          <p>
            Offered from the Faculty of Mathematics as most commonly a co-op
            program, students usually attend 8 school and 6 co-op terms in their
            degree. However, CS is very flexible, as many students historically
            have dropped co-ops, taking terms off, and messing with their
            schedule to fit their desires.
          </p>
          <h4>Computing and Financial Management</h4>
          <p>
            Computing and Financial Management (CFM) combines the core CS
            courses with electives from areas such as accounting, economics, and
            financial management. This is a joint offer from the Faculty of
            Mathematics and the School of Accounting and Finance, and has the
            same schedule (and flexibility) as CS.
          </p>
          <h4>CS/BBA</h4>
          <p>
            Joint with Wilfrid Laurier University, the Business Administration
            and Computer Science Double Degree (CS/BBA) is an exclusive offering
            that allows students to get experience in CS as well as many
            subfields of business. There are 10 school terms and either 4 or 5
            co-op terms in the usual schedule, so it’s a bit more work than CS
            or CFM.
          </p>
        </article>
      </section>
      <AngleDecoration isBottom={true} />
    </div>
  );
}

interface AngleDecorationProps {
  isBottom: boolean;
}

function AngleDecoration({ isBottom }: AngleDecorationProps) {
  return (
    <svg
      viewBox="0 0 100 100"
      className={isBottom ? `${styles.left} ${styles.angle}` : styles.angle}
    >
      <path
        d="M100,2 L2,2 L2,100"
        fill="none"
        strokeWidth="10"
        className={styles.anglePath}
      />
    </svg>
  );
}