import { memo } from 'react';

import { useTranslation } from 'react-i18next';

import { useResponsive } from '@/hooks/useSize';
import { maskAccount } from '@/utils/stringUtils';
import { unixTimeFormat } from '@/utils/timeUtils';

import LabelValueItem from '../LabelValueItem';

import { useService } from './useService';

const UserInfo = memo(() => {
    const { t } = useTranslation();
    const { isMobile } = useResponsive();
    const { userAccount, planExpireTime } = useService();

    if (!userAccount) return null;

    return (
        <div className={`${isMobile ? 'flex flex-col gap-2' : 'flex-row-bc'}`}>
            <LabelValueItem
                label={t('pages.pricing.userInfo.account')}
                value={maskAccount(userAccount)}
            />
            <LabelValueItem
                label={t('pages.pricing.userInfo.planExpireTime')}
                value={planExpireTime > 0 ? unixTimeFormat(planExpireTime, 'YYYY-MM-DD') : '-'}
            />
        </div>
    );
});

export default UserInfo;
