import React from 'react';
import { Card } from '@theorchard/suite-components';
import { useIdentity } from '@theorchard/suite-identity';

// eslint-disable-next-line @typescript-eslint/no-namespace
declare namespace Intl {
    class DisplayNames {
        constructor(lang: string[], options: unknown);
        of(code: string): string;
    }
}

export const AccountSettings = () => {
    const user = useIdentity();

    const languageNames = new Intl.DisplayNames(['en'], { type: 'language' });

    return (
        <Card className="AccountSettings">
            <Card.Header>Settings</Card.Header>
            <Card.Body>
                <dl>
                    <dt>Language</dt>
                    <dd>
                        {languageNames.of(user.locale ?? 'en')} ({user.locale})
                    </dd>
                    <dt>Number format</dt>
                    <dd>{user.numberFormat}</dd>
                </dl>
            </Card.Body>
        </Card>
    );
};