import { use } from "react";

import { CompatibilityResultPage } from "@/components/domains/compatibility";
import { Typography } from "@/components/ui";
import { loadCompatibility } from "@/entities/dashboard/loaders";

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

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

  return (
    <>
      <Typography as="h1" size="xl" weight="semiBold" className={styles.title}>
        {action?.title}
      </Typography>
      <CompatibilityResultPage id={resultId} />
    </>
  );
}
