import { useAppSelector } from "@/hooks";

const Footer = () => {
  const bpuid = useAppSelector((state) => state.app.bpuid);
  const assignment_id = useAppSelector((state) => state.app.assignment_id);

  return (
    <div
      className="grid gap-1 grid-cols-1
        md:grid-cols-3
        text-xs"
    >
      <div>
        <p>
          help:{" "}
          <a
            href={`mailto:support@jamesbillings67.com?subject=AMT Support Request: (${bpuid ?? "-"}) ${assignment_id ?? "–"}`}
          >
            support@jamesbillings67.com
          </a>
        </p>
      </div>

      <div>
        <p>
          made with <span className="text-rose-500">♥</span> by{" "}
          <a
            className="hover:cursor-pointer hover:text-pink"
            href="https://instagram.com/x0xMaximus"
            target="_blank"
          >
            Max Nanis
          </a>
        </p>
      </div>

      <div>
        <p>
          <a
            href="https://git.generalresearch.com/panels/amt-jb/"
            target="_blank"
          >
            open source
          </a>
        </p>
      </div>
    </div>
  );
};

export default Footer;