// import { Link } from "react-router-dom";
import { socialsIcons } from "../../utils/data";

export default function Footer() {
  const date = new Date().getFullYear();

  return (
    <div className="w-full h-[5.4375rem] bg-[F7F7F7] flex items-center">
      <div className="containerMode flex justify-center md:justify-between items-center flex-wrap gap-2">
        <p className="text-[.9375rem] tracking-[2%] font-semibold text-[#969696]">
          {date} @ {import.meta.env.VITE_BANK_NAME} Limited
        </p>
        <div className="footer-social-icons flex justify-end items-center gap-2">
          {renderSocialLinks()}
        </div>
      </div>
    </div>
  );
}

function renderSocialLinks(): JSX.Element {
  const link = socialsIcons.map(function (item, index) {
    let { name, image, link } = item;

    return (
      <a href={link} key={index} className="w-[1.875rem] h-[1.875rem]">
        <img src={image} alt={name} />
      </a>
    );
  });

  return <ul className="flex items-center gap-2">{link}</ul>;
}