/* eslint-disable no-console */
import { useState } from "react";

import { TabPaymentOption } from "@/components/widget/payment/tab-payment-option/tab-payment-option";
import { WhatIsAMasterpassDialog } from "@/components/widget/payment/what-is-a-masterpass-dialog/what-is-a-masterpass-dialog";
import { useBreakpoints } from "@/hooks/useBreakpoints";
import { useLocale } from "@/hooks/useLocale";

import { MasterpassLoginScreen } from "./masterpass-login-screen";
import { MasterpassNewCard } from "./masterpass-new-card";

const MasterpassLogin = () => {
  const [activeTab, setActiveTab] = useState<"1" | "2">("1");
  const { t } = useLocale();
  const { isDesktop } = useBreakpoints();
  return (
    <div className="relative mt-6">
      <TabPaymentOption
        defaultValue={activeTab}
        setActiveTab={(value: string) => setActiveTab(value as "1" | "2")}
        firstTabTitle={t("My registered cards")}
        secondTabTitle={t("Add new card")}
        firstTab={<MasterpassLoginScreen />}
        secondTab={
          <MasterpassNewCard
            setActiveTab={(value: string) => setActiveTab(value as "1" | "2")}
          />
        }
      />
      <div
        className={`absolute right-0 ${isDesktop ? "top-[2%]" : "top-[1%]"}`}
      >
        <WhatIsAMasterpassDialog />
      </div>
    </div>
  );
};

export { MasterpassLogin };