import React from "react";
import styled from "styled-components";
import { SvgProps } from "../../../components/Svg";
import Flex from "../../../components/Box/Flex";
import Dropdown from "../../../components/Dropdown/Dropdown";
import Link from "../../../components/Link/Link";
import Text from "../../../components/Text/Text";
import * as IconModule from "../icons";
import { socials } from "../config";
import { LinkLabel } from "./MenuEntry";
import { OutLink } from "../types";

const Icons = IconModule as unknown as { [key: string]: React.FC<SvgProps> };
interface Props {
  outLink?: OutLink[];
}

const Image = styled.img`
  width: 30px;
  height: 30px;
  border-radius: 50%;
`;

const SocialLinks: React.FC<Props> = ({ outLink }) => {
  let covers = "";
  if (outLink && outLink.length > 0) {
    covers = outLink[0].cover;
  }

  return (
    <Dropdown position="top-right" target={<Image src={covers} />}>
      {outLink && outLink.length > 0
        ? outLink?.map((item) => {
            return (
              <Link href={item.link} color="textSubtle" key={item.id}>
                <Image src={item.cover} />
              </Link>
            );
          })
        : ""}
    </Dropdown>
  );
};

export default React.memo(SocialLinks, () => true);
