import { Suspense } from "react";
import { useTranslations } from "next-intl";

import {
  Billing,
  LogOut,
  ProfileBlock,
  ProfileInformation,
  ProfileInformationSkeleton,
} from "@/components/domains/profile";
import { Card } from "@/components/ui";
import { loadUser } from "@/entities/user/loaders";

import styles from "./page.module.scss";

export default function Profile() {
  const t = useTranslations("Profile");

  const profileBlocks = [
    {
      title: t("profile_information.title"),
      description: t("profile_information.description"),
      children: (
        <Suspense fallback={<ProfileInformationSkeleton />}>
          <ProfileInformation user={loadUser()} />
        </Suspense>
      ),
    },
    {
      title: t("billing.title"),
      description: t("billing.description"),
      children: <Billing />,
    },
    {
      title: t("log_out.title"),
      children: <LogOut />,
    },
  ];

  return (
    <Card className={styles.card}>
      {profileBlocks.map((block, index) => (
        <div key={block.title}>
          <ProfileBlock {...block}>{block.children}</ProfileBlock>
          {index !== profileBlocks.length - 1 && <hr className={styles.line} />}
        </div>
      ))}
    </Card>
  );
}
