"use client";

import ButtonCustom from "./Button";
import { _useScopedI18n } from "../i18n/client";
import { useUserStore } from "../stores/userStore";
import { Typography } from "@material-tailwind/react";
import { useMemo } from "react";

export type SubscriptionBannerProps = {
  isSubscriptionActive: boolean;
  callback: () => void;
};

export default function SubscriptionBanner({
  isSubscriptionActive,
  callback,
}: SubscriptionBannerProps) {
  const scopeT = _useScopedI18n("products.subscriptionBanner");
  const { user } = useUserStore();

  const renderBanner = useMemo(() => {
    if (isSubscriptionActive)
      return (
        <div className="justify-between rounded-xl h-[200px] sm:h-[150px] p-[5%] lg:p-[2%] subscriptionBanner">
          <div className="w-full md:w-5/6 lg:w-3/4 xl:w-2/3">
            <Typography
              variant="h6"
              className="font-medium text-sm text-black-500 mb-1"
            >
              {scopeT("welcomeBack")}
            </Typography>

            <Typography
              variant="h3"
              className="font-semibold text-sm md:text-base text-black-500"
            >
              {scopeT("activeSubscription")}
            </Typography>
          </div>
        </div>
      );
    return (
      <div className="justify-between rounded-xl h-[200px] p-[5%] lg:p-[2%]  subscriptionBannerBuy">
        <div className="w-full md:w-5/6 lg:w-3/4 xl:w-2/3">
          <Typography
            variant="h5"
            className="font-medium text-sm text-black-500 mb-1"
          >
            {scopeT("welcome")}
          </Typography>

          {user?.subscriptionActivationPending ? (
            <Typography
              variant="h2"
              className="font-semibold text-sm md:text-base text-black-500"
            >
              {scopeT("subscriptionActivationPending")}
            </Typography>
          ) : (
            <>
              <Typography
                variant="h2"
                className="font-semibold text-sm md:text-base text-black-500"
              >
                {scopeT("inactiveSubscription")} 🚀
              </Typography>
            </>
          )}
          <ButtonCustom
            onClick={callback}
            className="font-medium mt-7"
            icon={undefined}
            disabled={user?.subscriptionActivationPending}
          >
            {scopeT("buySubscriptionBtn")}
          </ButtonCustom>
        </div>
      </div>
    );
  }, [isSubscriptionActive, callback, scopeT, user]);

  return <>{renderBanner}</>;
}
