import Link from "next/link";
import React from "react";

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

interface PageLinks {
  leftPage: string;
  rightPage: string;
}

export function BottomNav(props: PageLinks) {
  return (
    <div className={styles.container}>
      <div className={styles.subBox}>
        <Link href={props.leftPage}>
          <a>
            <Arrow isPointRight={true}></Arrow>
          </a>
        </Link>
        <Link href={props.leftPage}>
          <a className={styles.item}>View Demographics</a>
        </Link>
      </div>
      <div className={styles.subBox}>
        <Link href={props.leftPage}>
          <a className={styles.item}>View Co-ops</a>
        </Link>
        <Link href={props.leftPage}>
          <a>
            <Arrow isPointRight={false}></Arrow>
          </a>
        </Link>
      </div>
    </div>
  );
}

interface ArrowProps {
  isPointRight: boolean;
}

function Arrow({ isPointRight }: ArrowProps) {
  return (
    <svg
      width="250px"
      height="20px"
      className={isPointRight ? styles.right : styles.left}
    >
      <defs>
        <marker
          id="arrow"
          markerWidth="10"
          markerHeight="10"
          refX="5"
          refY="3"
          orient="auto"
          markerUnits="strokeWidth"
        >
          <path d="M0,0 L0,6 L9,3 z" className={styles.arrowPath} />
        </marker>
      </defs>

      <line
        x1="250"
        y1="10"
        x2="100"
        y2="10" // half of svg height
        strokeWidth="3"
        markerEnd="url(#arrow)"
        className={styles.linePath}
      />
    </svg>
  );
}