"use client";

import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
import {useEffect} from "react";

const stripePromise = loadStripe("pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHaxsrjjB7WqDYqN7Y3eF8mq3sF354F00l30L5GuJ");

export default function PricingTable() {
	useEffect(() => {
		console.log(process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE, process.env.NEXT_PUBLIC_STRIPE_KEY);
	}, []);

	return (
		<Elements stripe={stripePromise}>
			<div id={process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE}>
				<stripe-pricing-table
					id="pricing"
					pricing-table-id={process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE}
					publishable-key={process.env.NEXT_PUBLIC_STRIPE_KEY}
				/>
			</div>
		</Elements>
	);
}

// If using TypeScript, add the following snippet to your file as well.
declare global {
	namespace JSX {
		interface IntrinsicElements {
			"stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
		}
	}
}
