import React from 'react';
import { useTheme } from 'styled-components';
import { Typography } from '..';
import { LaunchIcon } from '../../icons';
import { Badge } from './styles';

type LinkBadgeProps = {
  link: string | undefined;
};

const LinkBadge: React.FC<LinkBadgeProps> = ({ link }) => {
  const theme = useTheme();
  if (!link) {
    return null;
  }

  return (
    <Badge>
      <Typography variant="utility4" color={theme.colors.neutral[700]}>
        {link}
      </Typography>
      <LaunchIcon />
    </Badge>
  );
};

export default LinkBadge;