import React from 'react';
import { FlaskConical } from 'lucide-react';

/**
 * Shown when no real Stripe publishable key is configured. Payments run through
 * the simulated checkout (no real charge); adding keys switches to live Stripe.
 */
const StripeConfigNotice = () => (
    <div className="rounded-2xl border border-amber-300/60 dark:border-amber-500/30 bg-amber-50 dark:bg-amber-500/10 p-4 md:p-5">
        <div className="flex items-start gap-3">
            <div className="w-9 h-9 rounded-xl bg-amber-400/20 text-amber-600 dark:text-amber-300 flex items-center justify-center shrink-0">
                <FlaskConical size={18} />
            </div>
            <div className="min-w-0">
                <p className="text-sm font-bold text-amber-800 dark:text-amber-200">
                    Demo mode — simulated Stripe Checkout
                </p>
                <p className="text-xs text-amber-700/80 dark:text-amber-200/70 mt-1 leading-relaxed">
                    No Stripe keys are configured, so "Pay Now" runs a simulated checkout
                    (no real charge). Add the keys below to switch to live Stripe-hosted
                    Checkout — no code changes needed:
                </p>
                <ul className="mt-2 space-y-1 text-[11px] font-mono text-amber-800 dark:text-amber-200/90">
                    <li>VITE_STRIPE_PUBLISHABLE_KEY <span className="opacity-60">(frontend)</span></li>
                    <li>STRIPE_SECRET_KEY <span className="opacity-60">(backend)</span></li>
                    <li>STRIPE_WEBHOOK_SECRET <span className="opacity-60">(backend / webhook)</span></li>
                </ul>
            </div>
        </div>
    </div>
);

export default StripeConfigNotice;