import styles from "./styles.module.scss"
import Button from "@/components/CompatibilityV2/components/Button";
import { useTranslations } from "@/hooks/translations"
import { ELocalesPlacement } from "@/locales"

interface IBillingProps {
    onBilling: () => void;
}

function Billing({ onBilling }: IBillingProps) {
    const { translate } = useTranslations(ELocalesPlacement.Profile);

    return (
        <div className={styles.container}>
            <Button
                className={styles.button}
                onClick={onBilling}
            >
                {translate("/profile.billing.billing_button")}
            </Button>
            <div className={styles.credits}>
                <p className={styles.creditsTitle}>
                    {translate("/profile.billing.credits.title", {
                        credits: String(0)
                    })}
                </p>
                <p className={styles.creditsDescription}>{translate("/profile.billing.credits.description")}</p>
            </div>
            <p className={styles.anyQuestions}>
                {translate("/profile.billing.any_questions", {
                    link: <a href="https://witlab.us" target="_blank" rel="noopener noreferrer">
                        {translate("/profile.billing.any_questions_link")}
                    </a>
                })}
            </p>
            <p className={styles.subscriptionUpdate}>
                {translate("/profile.billing.subscription_update", {
                    bold: <span>{translate("/profile.billing.subscription_update_bold")}</span>,
                    br: <br />
                })}
            </p>
        </div>
    )
}

export default Billing