import { useTranslations } from "next-intl";

import {
  AddConsultantButton,
  Caution,
  ConsultationTable,
} from "@/components/domains/additional-purchases";
import { Card, Typography } from "@/components/ui";

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

export default function AddConsultantPage() {
  const t = useTranslations("AdditionalPurchases.add-consultant");

  return (
    <>
      <Caution />
      <Typography as="h2" size="xl" weight="semiBold" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography
        as="p"
        size="sm"
        color="black"
        className={styles.exclusiveOffer}
      >
        {t("exclusive_offer")}
      </Typography>
      <Card className={styles.consultationTable}>
        <ConsultationTable />
      </Card>
      <AddConsultantButton />
    </>
  );
}
