import React from "react";
import styled from "styled-components";
import Flex from "../../../components/Box/Flex";
import Text from "../../../components/Text/Text";
import Dropdown from "../../../components/Dropdown/Dropdown";
import Link from "../../../components/Link/Link";
import MoreIcon from "../../../components/Svg/Icons/More";
interface ExternalLinkProps {
  link?: string;
  name?: string;
  icon?: string;
}

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

const LinkText = styled(Text)`
  word-break: break-all;
`;

const ExternalLink: React.FC<ExternalLinkProps> = ({ link = "", name = "", icon = "" }) => {
  return (
    <>
      <Link external href={link} color="textSubtle">
        {icon ? <Image src={icon} title={name} /> : <LinkText>{name}</LinkText>}
      </Link>
    </>
  );
};

export default ExternalLink;
