import { FC } from "react";
import Link from 'next/link';
import { useRouter } from "next/router";
import { ICON_LIST } from "../components";

interface Footer {
  type?: 'one' | 'two';
  socialLinks?: { id: string, website: string, url: string }[];
};

const FooterComponent: FC<Footer> = ({ type, socialLinks }) => {
  const router = useRouter();

  return (
    <footer className={`footer footer-${type}`}>
      <div className="footer-social-media">
        {socialLinks.length > 0 && socialLinks.map((link, index) => {
          const Icon = ICON_LIST[link.website];

          if(Icon) {
            return (
              <a href={link.url} target="_blank" key={index}>
                <Icon />
              </a>
            );
          }
        })}
      </div>
      <div className="footer-menu">
        <Link href="/contact">
          <a href="" className={router.pathname === '/contact' ? 'link-selected' : ''}>contact</a>
        </Link>
      </div>
    </footer>
  );
};

FooterComponent.defaultProps = {
  type: 'one'
};

export default FooterComponent;