ToBePlayed-Frontend/src/components/AccountInfoCard.jsx

import {useTranslation} from 'react-i18next';
import {UserRound} from 'lucide-react';

import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card';
import {useCurrentUserContext} from '../context/CurrentUserContext.jsx';
import {formatDateTime} from '../utils/format.js';

const formatDate = (value, locale) => {
    if (!value) return '—';
    try {
        return formatDateTime(value, locale);
    } catch {
        return value;
    }
};

export default function AccountInfoCard() {
    const {t, i18n} = useTranslation();
    const {user: profile} = useCurrentUserContext();
    const accountRows = [
        [t('SETTINGS.EMAIL'), profile?.email],
        [t('SETTINGS.ROLE'), profile?.role],
        [t('SETTINGS.CREATED_DATE'), formatDate(profile?.createdDate, i18n.language)],
        [t('SETTINGS.LAST_LOGIN'), formatDate(profile?.lastLogin, i18n.language)],
    ];

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2"><UserRound className="size-4 text-primary"/>{t('SETTINGS.ACCOUNT')}</CardTitle>
            </CardHeader>
            <CardContent>
                <dl className="divide-y">
                    {accountRows.map(([label, value]) => (
                        <div key={label} className="flex flex-col gap-1 py-3 first:pt-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between">
                            <dt className="text-sm text-muted-foreground">{label}</dt>
                            <dd className="text-sm font-medium break-all">{value || '—'}</dd>
                        </div>
                    ))}
                </dl>
            </CardContent>
        </Card>
    );
}