Untitled

import Link from "@/components/atoms/Link";
import React from "react";
import styles from "./NavigationIcons.module.scss";
import cn from "classnames";
import useMediaQuery from "hooks/useMediaQuery";

import { useState } from "react";
import { useEffect } from "react";
const NavigationIcons = ({ links, socialSharing, title, className }) => {
  const classes = cn(styles.icons, className);
  const isDesktop = useMediaQuery("(min-width: 768px)");
  const [siteURL, setSiteURL] = useState();
  console.log(title);

  useEffect(() => {
    if (typeof window !== "undefined") {
      const defaultLink =
        window.location.protocol +
        "//" +
        window.location.host +
        window.location.pathname;
      setSiteURL(defaultLink);
    }
  }, []);
  const mailLink = `mailto:?body=${title} 
  ${siteURL}
  `;
  const twitterLink = `https://twitter.com/intent/tweet?url=${siteURL}\n\n&text=${title}\n\n&via=TheGladesBrom`;
  const encodedTwitterLink = encodeURI(twitterLink);

  const encodedMailLink = encodeURI(mailLink);
  const defaultLinks = [
    { link_type: "facebook", link: generateSocialLink("facebook") },
    { link_type: "twitter", link: generateSocialLink("twitter") },
    { link_type: "email", link: generateSocialLink("email") },
  ];

  function generateSocialLink(platform) {
    let link = "";
    switch (platform) {
      case "facebook":
        return (link = `https://www.facebook.com/sharer/sharer.php?u=${siteURL}%2F&display=popup&ref=plugin&src=share_button`);
      case "twitter":
        return (link = encodedTwitterLink);
      case "email":
        return (link = encodedMailLink);
    }

    return link;
  }

  return (
    <ul className={classes}>
      {socialSharing &&
        !links &&
        defaultLinks.map((link) => {
          return (
            <li key={link.link_type}>
              <Link
                url={link?.link}
                className={styles[`icons_${link.link_type}`]}
                external={true}
              />
            </li>
          );
        })}
      {links &&
        links.length >= 1 &&
        links?.map((link) => {
          if (link.link_type === "telephone" && isDesktop && link.link !== "") {
            return (
              <li
                key={link.link_type}
                className={styles[`icons_${link.link_type}`]}
              >
                <Link
                  className={styles[`icons_${link.link_type}`]}
                  external={true}
                />
                <div className={styles[`icons_${link.link_type}_number`]}>
                  {link.link}
                </div>
              </li>
            );
          } else if (link.link_type !== "telephone") {
            if (link.link === "") {
              return null;
            } else {
              return (
                <li key={link.link_type}>
                  <Link
                    url={link?.link}
                    className={styles[`icons_${link.link_type}`]}
                    external={true}
                  />
                </li>
              );
            }
          } else if (link.link_type === "telephone" && !isDesktop) {
            return (
              <li key={link.link_type}>
                <Link
                  url={`tel:${link?.link}`}
                  className={styles[`icons_${link.link_type}`]}
                  external={true}
                />
              </li>
            );
          }
        })}
    </ul>
  );
};

export default NavigationIcons;