import React from "react";
import styled from "styled-components";
import { SocialLink } from "../types";
import Dropdown from "../../../components/Dropdown/Dropdown";
import ExternalLink from "./ExternalLink";

interface Props {
  list: SocialLink[];
}

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

const PanelFooter: React.FC<Props> = ({ list }) => {
  return (
    <>
      {list?.map((item) => {
        return item.list && item.list.length > 1 ? (
          <Dropdown position="top-right" key={item.key} target={<Image src={item.icon} title={item.name} />}>
            {item.list?.map((childItem) => {
              return <ExternalLink key={childItem.link} link={childItem.link} name={childItem.name} />;
            })}
          </Dropdown>
        ) : (
          item.list && <ExternalLink key={item.key} link={item.list[0].link} icon={item.icon} name={item.name} />
        );
      })}
    </>
  );
};

export default PanelFooter;