// import MainButton from "@/components/MainButton";
// import Title from "@/components/Title";
// import routes from "@/routes";
// import { actions } from "@/store";
// import {
//   PaymentElement,
//   useElements,
//   useStripe,
// } from "@stripe/react-stripe-js";
// import { useState } from "react";
// import { useDispatch } from "react-redux";
// import { useNavigate } from "react-router-dom";
// import styles from "./styles.module.css";

// export type TConfirmType = "payment" | "setup";

// interface ICheckoutFormProps {
//   children?: JSX.Element | null;
//   subscriptionReceiptId?: string;
//   returnUrl?: string;
//   confirmType?: TConfirmType;
//   isHide?: boolean;
// }

export default function CheckoutForm(
  // {
  //   children,
  //   subscriptionReceiptId,
  //   returnUrl,
  //   confirmType = "payment",
  //   isHide = false,
  // }: ICheckoutFormProps
) {
  // const stripe = useStripe();
  // const elements = useElements();
  // const dispatch = useDispatch();
  // const navigate = useNavigate();

  // const [message, setMessage] = useState("");
  // const [isProcessing, setIsProcessing] = useState(false);
  // const [formReady, setFormReady] = useState(false);

  // const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  //   e.preventDefault();

  //   if (!stripe || !elements) {
  //     return;
  //   }

  //   setIsProcessing(true);

  //   try {
  //     const { error } = await stripe[
  //       confirmType === "payment" ? "confirmPayment" : "confirmSetup"
  //     ]({
  //       elements,
  //       confirmParams: {
  //         return_url: returnUrl
  //           ? returnUrl
  //           : `https://${window.location.host}/payment/result/${subscriptionReceiptId}/`,
  //       },
  //     });
  //     if (error) {
  //       setMessage(error?.message || "Oops! Something went wrong.");
  //     } else {
  //       dispatch(actions.status.update("subscribed"));
  //       navigate(routes.client.paymentSuccess());
  //     }
  //   } catch (error) {
  //     console.log("error -> ", error);
  //     setMessage("Oops! Something went wrong.");
  //   } finally {
  //     setIsProcessing(false);
  //   }
  // };

  return (
    <></>
    // <form
    //   className={`payment-form-stripe  ${isHide ? styles.hide : ""}`}
    //   id="payment-form"
    //   onSubmit={handleSubmit}
    // >
    //   {children ? children : null}
    //   <PaymentElement
    //     options={{
    //       terms: { card: "never" },
    //       wallets: {
    //         googlePay: "never",
    //         applePay: "never",
    //       },
    //     }}
    //     onReady={() => setFormReady(true)}
    //   />
    //   <MainButton
    //     color="blue"
    //     disabled={isProcessing || !formReady}
    //     id="submit"
    //     className={styles.button}
    //   >
    //     <img src="/lock.svg" alt="Secure" />
    //     <span id="button-text">{isProcessing ? "Processing..." : "Start"}</span>
    //   </MainButton>
    //   {!!message.length && (
    //     <Title variant="h5" style={{ color: "red" }}>
    //       {message}
    //     </Title>
    //   )}
    // </form>
  );
}
