import React from "react";
import LinkedinIcon from "./social-icons/linkedin";

import { StyledFooter, SocialIconsList } from "./footer.styled";
import { Body } from "@equilab/ui-curated";

export const SOCIAL_LINKS = [
  {
    Icon: LinkedinIcon,
    href: "https://www.linkedin.com/company/luminous-art-foundation/ ",
  },
];

const SocialIcon: React.FC<{
  Icon: React.FC<{ className?: string }>;
  href: string;
}> = ({ Icon, href }) => {
  return (
    <a href={href} target="_blank" rel="noreferrer">
      <Icon className="socialIcon" />
    </a>
  );
};

const Footer: React.FC = () => {
  return (
    <StyledFooter>
      <SocialIconsList>
        {SOCIAL_LINKS.map((l, idx) => (
          <SocialIcon key={idx} {...l} />
        ))}
      </SocialIconsList>
      <a href="/privacy-policy" target="_blank">
        <Body>Privacy Policy</Body>
      </a>
    </StyledFooter>
  );
};

export default Footer;
