import Seperator from "@components/Seperator";
import SeperatorInner from "@components/SeperatorInner";
import SeperatorSmallInner from "@components/SeperatorSmallInner";
import Facebook from "@svg/Facebook";
import Instagram from "@svg/Instagram";
import Mail from "@svg/Mail";
import Phone from "@svg/Phone";
import Pin from "@svg/Pin";
import PoBox from "@svg/PoBox";
import Whatsapp from "@svg/Whatsapp";
import Youtube from "@svg/Youtube";
import Link from "next/link";

const Footer = async ({ footerContact }: any) => {
  footerContact = footerContact.data;
  const date = new Date();
  const year = date.getFullYear();
  const appName = process.env.APP_NAME;
  let locationLabel = footerContact.locationLabel;
  let locationLink = footerContact.locationLink;
  let poLabel = footerContact.poLabel;
  let phoneLabel = footerContact.phoneLabel;
  let phone = footerContact.phone;
  let mailLabel = footerContact.mailLabel;
  let mailLink = footerContact.mailLink;
  let instagramLink = footerContact.instagramLink;
  let whatsappPhone = footerContact.whatsappPhone;
  let facebookLink = footerContact.facebookLink;
  let youtubeLink = footerContact.youtubeLink;

  return (
    <>
      <Seperator />
      <footer>
        <div className="footer-bar">
          <SeperatorInner />
          <div className="content-fluid">
            <div className="flex justify-center">
              <h2 className="section-header white">
                <span className="z-index-1">Contact Us</span>
              </h2>
            </div>
            <SeperatorInner />
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-10">
              <div className="contact-info">
                {locationLabel && (
                  <>
                    <Link
                      href={locationLink}
                      target="_blank"
                      className="contact-detail"
                    >
                      <Pin />
                      <span className="ml-3">{locationLabel}</span>
                    </Link>
                    <SeperatorSmallInner />
                    <SeperatorSmallInner />
                  </>
                )}
                {poLabel && (
                  <>
                    <p className="contact-detail">
                      <PoBox />
                      <span className="ml-3">{poLabel}</span>
                    </p>
                    <SeperatorSmallInner />
                    <SeperatorSmallInner />
                  </>
                )}
                {phoneLabel && (
                  <>
                    <Link
                      href={`tel:${phone}`}
                      target="_blank"
                      className="contact-detail"
                    >
                      <Phone />
                      <span className="ml-3">{phoneLabel}</span>
                    </Link>
                    <SeperatorSmallInner />
                    <SeperatorSmallInner />
                  </>
                )}
                {mailLabel && (
                  <>
                    <Link
                      href={`mailto:${mailLink}`}
                      target="_blank"
                      className="contact-detail"
                    >
                      <Mail />
                      <span className="ml-3">{mailLabel}</span>
                    </Link>
                  </>
                )}
              </div>
              <div className="flex items-start justify-start sm:items-center sm:justify-center">
                <div className="social-media">
                  <div className="title">Follow Us On</div>
                  <SeperatorSmallInner />
                  <div className="flex gap-x-5">
                    {whatsappPhone && (
                      <>
                        <Link
                          href={`https://api.whatsapp.com/send?phone=${whatsappPhone}`}
                          target="_blank"
                          className="social-platform"
                        >
                          <div className="z-index-1">
                            <Whatsapp />
                          </div>
                        </Link>
                      </>
                    )}
                    {instagramLink && (
                      <>
                        <Link
                          href={instagramLink}
                          target="_blank"
                          className="social-platform"
                        >
                          <div className="z-index-1">
                            <Instagram />
                          </div>
                        </Link>
                      </>
                    )}
                    {facebookLink && (
                      <>
                        <Link
                          href={facebookLink}
                          target="_blank"
                          className="social-platform"
                        >
                          <div className="z-index-1">
                            <Facebook />
                          </div>
                        </Link>
                      </>
                    )}
                    {youtubeLink && (
                      <>
                        <Link
                          href={youtubeLink}
                          target="_blank"
                          className="social-platform"
                        >
                          <div className="z-index-1">
                            <Youtube />
                          </div>
                        </Link>
                      </>
                    )}
                  </div>
                </div>
              </div>
            </div>
            <SeperatorInner />
            <div className="flex justify-center">
              <div className="footer-reserved">
                <p>
                  Copyright © {year} {appName}, All Rights Reserved
                </p>
              </div>
            </div>
            <SeperatorInner />
          </div>
        </div>
        <SeperatorSmallInner />
        <div className="footer-desing-dev">
          <p>Designed & Developed by</p>
          <Link
            href={"https://theiboost.com/"}
            target="_blank"
            className="ml-1"
          >
            The iBoost
          </Link>
        </div>
        <SeperatorSmallInner />
      </footer>
    </>
  );
};

export default Footer;