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].icon;
  // }
  return (
    <>
      {/* {outLink && outLink.length > 1 ? (
        <Dropdown position="top-right" target={<Image src={covers} />}>
          {outLink && outLink.length > 0
            ? outLink?.map((item) => {
                return (
                  <Link href={item.link} color="textSubtle">
                    <Text>{item.name}</Text>
                  </Link>
                );
              })
            : ""}
        </Dropdown>
      ) : (
        <>
          {outLink && outLink.length > 0
            ? outLink?.map((item) => {
                return (
                  <Link href={item.link} color="textSubtle">
                    <Image src={covers} />
                  </Link>
                );
              })
            : ""}
        </>
      )} */}
    </>
  );
};

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