import { m } from "framer-motion";
import Link from "next/link";
import { ReactComponentElement, ReactElement } from "react";

const DefaultNavOption = ({
  label,
  href,
}: {
  label: string;
  href: string;
}): ReactElement => {
  return (
    <Link href={href} key={label} className="w-full text-center">
      <m.div
        variants={defaultNavVariants}
        initial="initial"
        whileHover="whileHover"
        whileTap="whileTap"
      >
        <p className="pointer-events-auto relative select-none pl-3 pr-3 font-plusJakarta text-white md:pl-5 md:pr-5">
          {label}
        </p>
      </m.div>
    </Link>
  );
};

const defaultNavVariants = {
  initial: {
    scale: 1,
  },
  whileHover: {
    scale: 1.05,
    transition: {
      duration: 0.2,
    },
  },
  whileTap: {
    scale: 0.95,
    transition: {
      duration: 0.2,
    },
  },
};

interface NavTemplate {
  content: ReactComponentElement<any> | ReactElement;
}

const homeMain: NavTemplate[] = [
  { content: <DefaultNavOption label="Home" href="/" /> },
  // { content: <DefaultNavOption label="About" href="/about" /> },
  { content: <DefaultNavOption label="Dashboard" href="/dashboard" /> },
  { content: <DefaultNavOption label="Team" href="/team" /> },
  { content: <DefaultNavOption label="Wiki" href="/wiki" /> },
  // { content: <DefaultNavOption label="Contact" href="/contact" /> },
];

export { type NavTemplate, homeMain };