import clsx from 'clsx';
import {LinkIcon} from '../../icons/material/Link';
import {ExternalLink} from '../../ui/buttons/external-link';
import {Trans} from '../../i18n/trans';
import {useSettings} from '../../core/settings/use-settings';

interface LearnMoreLinkProps {
  link: string;
  className?: string;
}
export function LearnMoreLink({link, className}: LearnMoreLinkProps) {
  const {site} = useSettings();
  if (site.hide_docs_button) {
    return null;
  }
  return (
    <div className={clsx('flex items-center gap-8', className)}>
      <LinkIcon size="sm" />
      <ExternalLink href={link}>
        <Trans message="Learn more" />
      </ExternalLink>
    </div>
  );
}