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

import {
  CompatibilityActionFieldsForm,
  CompatibilityActionFieldsFormSkeleton,
} from "@/components/domains/compatibility";
import { Typography } from "@/components/ui";
import { loadCompatibilityActionFields } from "@/entities/compatibilityActionFields/loaders";
import { loadCompatibility } from "@/entities/dashboard/loaders";

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

export default function Compatibility({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const actions = use(loadCompatibility());
  const action = actions?.find(action => action._id === id);
  const t = useTranslations("Compatibility");

  return (
    <>
      <div className={styles.header}>
        <Typography
          as="h1"
          size="xl"
          weight="semiBold"
          className={styles.title}
        >
          {action?.title}
        </Typography>
        <Typography as="p" size="sm" className={styles.description}>
          {t("description")}
        </Typography>
      </div>
      <Suspense key={id} fallback={<CompatibilityActionFieldsFormSkeleton />}>
        <CompatibilityActionFieldsForm
          fields={loadCompatibilityActionFields(id)}
          actionId={id}
        />
      </Suspense>
    </>
  );
}
