import React from 'react';
import { Text, Chip } from 'folds';
import { useTranslation } from 'react-i18next';
import { useAuthedUserId } from '../../../hooks/useAuthedUserId';
import { SettingTile } from '../../../components/setting-tile';
import { copyToClipboard } from '../../../utils/dom';
import { SettingsSection } from '../SettingsSection';
import { Mono } from '../styles.css';

export function MatrixId() {
  const { t } = useTranslation();
  const userId = useAuthedUserId();

  return (
    <SettingsSection label={t('Settings.matrix_id')}>
      <SettingTile
        title={
          <Text as="span" size="T300" className={Mono}>
            {userId}
          </Text>
        }
        after={
          <Chip variant="Secondary" radii="Pill" onClick={() => copyToClipboard(userId)}>
            <Text size="T200">{t('Settings.copy')}</Text>
          </Chip>
        }
      />
    </SettingsSection>
  );
}
