import {SettingsPage} from '@/features/settings/components/SettingsPage';
import {ProfileForm} from '@/features/settings/components/ProfileForm';
import {settingsServerRepository} from '@/features/settings/repositories/settingsServerRepository';

/**
 * Server Component: the record is read on the server and handed to the form as
 * its initial state, so the inputs paint filled rather than flashing empty.
 * The form then saves through the client repository over HTTP.
 *
 * The read goes through a repository rather than the fixture module the page
 * used to import — a page that knows the shape of a mock is a page that breaks
 * the day the mock is deleted.
 */
export default async function MerchantProfilePage() {
  const profile = await settingsServerRepository.getProfile();

  return (
    <SettingsPage
      title="Personal Profile"
      description="Your user credentials, contact details, account email and timezone preference."
    >
      <ProfileForm initialData={profile} />
    </SettingsPage>
  );
}
