import React from "react";

import styles from "./BottomNav.module.css";
export function BottomNav() {
  return (
    <div className={styles.container}>
      <Arrow pointLeft={true}></Arrow>
      <p className={styles.item}>View Demographics</p>
      <p className={styles.item}>View Co-ops</p>
      <Arrow pointLeft={false}></Arrow>
    </div>
  );
}

interface ArrowProps {
  pointLeft: boolean;
}

function Arrow({ pointLeft }: ArrowProps) {
  return (
    <svg
      viewBox="0 0 50 50"
      className={pointLeft ? `${styles.left} ${styles.arrow}` : styles.arrow}
    >
      <path
        d="M100,2 L2,2 L2,100"
        fill="none"
        strokeWidth="10"
        className={styles.anglePath}
      />
    </svg>
  );
}