import {AccountName, Username} from '@caj/configs/types';
import {RootState} from '@caj/redux/store';
import {HStack, Text} from 'native-base';
import {useSelector} from 'react-redux';

export default function NameDisplay(props: {
  UserName: Username;
  AccountName: AccountName;
  fontSize?: number;
}) {
  const theme = useSelector(
    (state: RootState) => state.appVariables.preferences.theme,
  );
  const fontSize = props.fontSize || 15;
  const lineHeight = fontSize * 1.25;

  return (
    <HStack space={fontSize / 30} alignItems={'flex-end'}>
      <Text fontSize={fontSize} color="primary.400">
        {props.UserName !== '' ? props.UserName : '----'}
      </Text>
      <Text
        fontSize={fontSize / 1.5}
        fontFamily={'Outfit-Light'}
        color="light.400">
        {props.AccountName !== '' ? props.AccountName : '----'}
      </Text>
    </HStack>
  );
}
