import { PageBody } from '@kit/ui/page';

import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
import { withI18n } from '~/lib/i18n/with-i18n';

import { loadCurrentUserAccount } from '../_lib/server/load-user-account';
import AccountSettingsForm from './_components/account-settings-form';
import SettingsSectionHeader from './_components/settings-section-header';

export const generateMetadata = async () => {
  const i18n = await createI18nServerInstance();
  const title = i18n.t('account:settingsTab');

  return {
    title,
  };
};

async function PersonalAccountSettingsPage() {
  const account = await loadCurrentUserAccount();
  return (
    <PageBody>
      <div className="mx-auto w-full bg-white p-6">
        <div className="space-y-6">
          <SettingsSectionHeader
            titleKey="account:accountTabLabel"
            descriptionKey="account:accountTabDescription"
          />
          <AccountSettingsForm account={account} />
        </div>
      </div>
    </PageBody>
  );
}

export default withI18n(PersonalAccountSettingsPage);