import { serverClient } from "@/lib/trpc/server";
import { extendedUser } from "../_constants";

import CommunicationPreferences from "@/components/MyProfile/CommunicationPreferences";
import CreditCards from "@/components/MyProfile/CreditCards";
import MaxWidth from "@/components/MaxWidth";
import MembershipCard from "@/components/MyProfile/MembershipCard";
import Password from "@/components/MyProfile/Password";
import Profile from "@/components/MyProfile/Profile";
import Wishes from "@/components/MyProfile/Wishes";

import styles from "./page.module.css"
import Modal from "@/components/Modal";

export default async function MyProfile() {
  const data = await serverClient().user.get()
  const user = {
    ...data,
    ...extendedUser,
  }
  return (
    <MaxWidth className={styles.page} tag="main">
      <Modal>
        <h1>HALLÅ ELLER!?!</h1>
      </Modal>
      <Profile user={user} />
      <section className={styles.cards}>
        <CommunicationPreferences />
        <Wishes />
        <MembershipCard />
        <CreditCards />
        <Password />
      </section>
    </MaxWidth>
  )
}