import { useRouter } from "next/router";
import React from "react";

import { Image } from "./Image";

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

export function ShapesBackground(props: { children: React.ReactNode }) {
  const router = useRouter();

  return (
    <>
      <div className={styles.shapesContainer}>
        {routeList.find((el) => router.pathname === el.route)?.shapes() ?? null}
      </div>
      {props.children}
    </>
  );
}

const routeList = [
  {
    route: "/",
    shapes: HomeShapes,
  },
];

type ShapeType =
  | "asterisk"
  | "circle"
  | "cross"
  | "dots"
  | "hash"
  | "plus"
  | "ring"
  | "triangle"
  | "waves";

function Shape(props: { shape: ShapeType; className: string }) {
  return (
    <Image
      src={`/images/shapes/${props.shape}.svg`}
      className={`${styles.shape} ${props.className}`}
    />
  );
}

function HomeShapes() {
  return (
    <>
      <Shape shape="dots" className={styles.homeDots} />
      <Shape shape="hash" className={styles.homeHash1} />
      <Shape shape="triangle" className={styles.homeTriangle1} />
      <Shape shape="waves" className={styles.homeWaves1} />
      <Shape shape="triangle" className={styles.homeTriangle2} />
      <Shape shape="plus" className={styles.homePlus} />
      <Shape shape="waves" className={styles.homeWaves2} />
      <Shape shape="hash" className={styles.homeHash2} />
    </>
  );
}