"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";

import { Button, Typography } from "@/components/ui";
import { ROUTES } from "@/shared/constants/client-routes";

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

function Billing() {
  const t = useTranslations("Profile.billing");
  const router = useRouter();

  const onBilling = () => {
    router.push(ROUTES.profileSubscriptions());
  };

  return (
    <div className={styles.container}>
      <Button className={styles.button} onClick={onBilling}>
        <Typography size="xl" color="white">
          {t("billing_button")}
        </Typography>
      </Button>
      <div className={styles.credits}>
        <Typography as="p" weight="bold" color="white" align="left">
          {t("credits.title", {
            credits: String(0),
          })}
        </Typography>
        <Typography
          className={styles.creditsDescription}
          as="p"
          size="sm"
          color="white"
          align="left"
        >
          {t("credits.description")}
        </Typography>
      </div>
      <Typography
        as="p"
        weight="bold"
        align="left"
        className={styles.anyQuestions}
      >
        {t.rich("any_questions", {
          link: chunks => (
            <Link
              href="https://witlab.us"
              target="_blank"
              rel="noopener noreferrer"
            >
              {chunks}
            </Link>
          ),
          linkText: t("any_questions_link"),
        })}
      </Typography>
      <Typography
        as="p"
        align="left"
        color="secondary"
        className={styles.subscriptionUpdate}
      >
        {t.rich("subscription_update", {
          bold: chunks => (
            <Typography weight="bold" color="secondary">
              {chunks}
            </Typography>
          ),
          subscriptionUpdateBold: t("subscription_update_bold"),
          br: () => <br />,
        })}
      </Typography>
    </div>
  );
}

export default Billing;