import './styles/footer.css';
import React from "react";
import {Section} from "../../molecules/Section";
import Image from "next/image";
import { Icon } from "../../molecules/Icon";
import Link from "../../molecules/Link";
import {FooterMenu} from "./FooterMenu";
import { eyebrow, flexColumnStyling } from './styles/footer.styles';
import { cssMerge } from "../../utils/cssMerge";
import type { FooterProps } from "./footer.types";
import type { FC } from 'react';


export const Footer: FC<FooterProps> = ({ heading, menus, socials, solanaLogo }) => {
  return (
    <Section wrapperClass="footer-gradient" className={cssMerge(flexColumnStyling({ element: "section" }))}>
      <div
        className={cssMerge(flexColumnStyling({ element: "footerWrapper" }))}
      >
        <div
          className={cssMerge(flexColumnStyling({ element: "companyInfo" }))}
        >
          <div
            className={cssMerge(
              flexColumnStyling({ element: "companyHeader" })
            )}
          >
            {solanaLogo && (
              <Image
                src={solanaLogo}
                width={32}
                height={29}
                alt="Solana-Logo"
              />
            )}
            {heading && <span className={cssMerge(eyebrow({variant: 'footerHeading'}))}>{heading}</span>}
          </div>
          <div
            className={cssMerge(
              flexColumnStyling({ element: "socialsTrademarkWrapper" })
            )}
          >
            <div className="tw-flex tw-justify-center tw-gap-2 sm:tw-justify-start">
              {socials &&
                socials.map((social) => {
                  if (!social.icon) {
                    return;
                  }
                  return (
                    <Link
                      href={social.url || ""}
                      className="tw-rounded-3xl tw-bg-gray-500 tw-p-1 hover:tw-bg-common-white focus:tw-bg-common-white tw-transition-colors"
                    >
                      <Icon id={social.icon} className='tw-text-common-black hover:tw-text-purple-400' fill="currentColor" />
                    </Link>
                  );
                })}
            </div>
            <span className="tw-text-gray-500 tw-text-sm tw-text-center tw-hidden md:tw-block">
              {`© ${new Date().getUTCFullYear()} Solana Foundation. All rights reserved.`}
            </span>
          </div>
        </div>
        <div
          className={cssMerge(flexColumnStyling({ element: "menusWrapper" }))}
        >
          <div className="tw-flex tw-gap-8">
            {menus && menus.map((menu, index) => <FooterMenu key={`${menu.menuItemHeading}-${index}`} {...menu} />)}
          </div>
          {/* TODO Add locale Module */}
        </div>
      </div>
      <div className="tw-flex tw-justify-center tw-pt-8 tw-border-t md:tw-hidden tw-border-t-gray-700">
        <span className="tw-text-gray-500 tw-text-sm tw-text-center">{`© ${new Date().getUTCFullYear()} Solana Foundation. All rights reserved.`}</span>
      </div>
    </Section>
  );
};
