import Image from 'next/image';
import Container from '@/components/layout/Container';
import SocialLinks from '@/components/shared/SocialLinks';

import mafLogo from '@/assets/img/footer-logo.png';
import logo from '@/assets/img/logo.png';
import React from 'react';

export interface IFooter {
  socialPlatforms?: ISocialLink[];
  policyLinks?: ILink[];
  linkGroups?: {
    title?: string;
    links: ILink[];
  }[];
  labels: {
    copyrightText: string;
    socialLinkText: string;
    poweredByText: string;
    topText: string;
  };
}

const Footer: React.FC<IFooter> = ({
  socialPlatforms,
  policyLinks,
  linkGroups,
  labels
}) => {
  return (
    <footer className="bg-default-900 font-light text-content1">
      <Container className="grid grid-cols-1 md:grid-cols-12 text-content1 py-8">
        <div className="md:col-span-4">
          <Image src={logo} alt="MAF Junction" className="w-28 mb-6" />

          {socialPlatforms && (
            <div className="mb-6 w-56">
              <h3 className="mb-4 font-light text-4xl text-white">
                {labels.socialLinkText}
              </h3>
              <SocialLinks
                socialPlatforms={socialPlatforms}
                className="md:flex-nowrap"
              />
            </div>
          )}
        </div>

        <div className="grid grid-cols-1 md:gap-4 md:col-span-8 md:grid-cols-3 md:px-8">
          {linkGroups?.map((group) => (
            <div key={group.title} className="mt-4 md:mt-0">
              <h3 className="mb-2 md:mb-4 font-serif font-light text-white">
                {group.title?.toUpperCase()}
              </h3>
              {group?.links.map((link: ILink, i) => (
                <React.Fragment key={i}>
                  <div className="mt-2">
                    <a href={link.url}>{link.label}</a>
                  </div>
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>

        <div className="flex flex-wrap md:col-span-4 text-sm">
          {policyLinks?.map((link, i) => (
            <a
              key={link.label}
              href={link.url}
              className="text-[#AEAEAE] text-[1.05em] px-1 my-1 border-s-1 first:border-s-0 first:ps-0 leading-3">
              {link.label}
            </a>
          ))}
        </div>
      </Container>

      <div className="py-6 px-4 md:px-0 bg-default-800">
        <Container>
          <div className="flex items-center justify-between flex-wrap sm:flex-nowrap gap-8">
            <div className="grow">
              <div className="font-sans text-xs mb-2">
                {labels.poweredByText}
              </div>
              <Image
                src={mafLogo}
                alt="Majid Al Futtaim"
                className="w-[12.5rem]"
              />
            </div>
            <div className="text-sm text-right">{labels.copyrightText}</div>
          </div>
        </Container>
      </div>
    </footer>
  );
};

export default Footer;
