import SessionManager from '@arcblock/did-connect-react/lib/SessionManager';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
import { Stack, Tooltip } from '@mui/material';

import { usePaymentContext } from '../../contexts/payment';

export default function UserButtons() {
  const { t } = useLocaleContext();
  const { session } = usePaymentContext();

  return (
    <Stack
      direction="row"
      sx={{
        alignItems: 'center',
        justifyContent: 'space-between',
      }}>
      <LocaleSelector showText={false} />
      {session?.user ? (
        <SessionManager session={session} />
      ) : (
        <Tooltip title={t('payment.checkout.login')} arrow>
          <SessionManager session={session} />
        </Tooltip>
      )}
    </Stack>
  );
}