import ExternalLinkIconWrapper from '~/src/components/Icon/ExternalLinkIcon';
import Link from '~/src/components/Link2';
import Text from '~/src/components/Text';
import { useI18nDynamic } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';

export const DialogHelpText = () => {
  const { tx } = useI18nDynamic('contentLink');

  return (
    <Text size="1.4rem" color="#888">
      <Layout align="center" gap="2">
        {tx('shareDialog.subtitle', {
          link: ({ children }) => (
            <Link href="/account" inNewTab>
              <Layout align="center" gap="2">
                <Text size="1.4rem" color="white">
                  {children}
                </Text>
                <ExternalLinkIconWrapper size="1.4rem" color="white" />
              </Layout>
            </Link>
          ),
        })}
      </Layout>
    </Text>
  );
};