import { footerCustomerLinks, footerSocialLinks } from "../../utils/data";

interface FooterLinksProps {
  href: string;
  icon?: string;
  text?: string;
}

const BottomFooterOne = () => {
  const date: number = new Date().getFullYear();

  return (
    <footer className="pt-[1.25rem] pb-[1.875rem]">
      <div className="containerMode flex flex-col gap-2 w-full">
        <div className="flex flex-wrap flex-[100] justify-between w-full gap-2">
          <SocialIconButtons />
          <CustomerLinks />
        </div>
        <p className="text-[.8125rem] text-[#333] leading-[1.42857]">
          © <span>{date}</span> {import.meta.env.VITE_BANK_NAME} (Licensed by the
          Central Bank of Nigeria)
        </p>
      </div>
    </footer>
  );
};

export default BottomFooterOne;

const SocialIconButtons = () => {
  const icons = footerSocialLinks.map(
    ({ href, icon }: FooterLinksProps, idx: number) => (
      <li key={idx}>
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="bg-[#592B81] py-[.3125rem] px-[.625rem] text-white w-[2.625rem] h-[2.625rem] flex items-center justify-center rounded-[3.125rem]"
        >
          {icon && <img src={icon} alt="icon" />}
        </a>
      </li>
    )
  );

  return <ul className="flex flex-[33.333] items-center gap-1">{icons}</ul>;
};

const CustomerLinks = () => {
  const links = footerCustomerLinks.map(
    ({ href, text }: FooterLinksProps, idx: number) => (
      <li key={idx} className="list-none">
        <a
          href={href}
          target="_blank"
          rel="noopener noreferrer"
          className="py-[.75rem] text-[.8125rem] uppercase text-[#606161] flex items-center justify-center"
        >
          {text}
        </a>
      </li>
    )
  );
  return (
    <div className="flex-[66.667] flex items-center flex-nowrap md:flex-wrap gap-2">
      {links}
    </div>
  );
};