import { Link } from '@inertiajs/react';
import AppLayout from '@/layouts/AppLayout';
import { useTranslator } from '@/lib/i18n';

interface Props {
    reference: string;
    plan: string;
    instructions: string;
}

export default function PaymentPending({ reference, plan, instructions }: Props) {
    const t = useTranslator();
    return (
        <AppLayout>
            <div className="max-w-xl mx-auto px-6 py-16 text-center">
                <div className="w-12 h-12 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center mx-auto mb-5">
                    <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>
                </div>
                <h1 className="font-serif text-3xl mb-2">{t('billing.pending_title')}</h1>
                <p className="text-muted-foreground mb-6">{t('billing.pending_body', { plan: t(`billing.${plan}`) })}</p>

                {instructions && (
                    <div className="bg-card border border-border rounded-xl p-5 text-left text-sm whitespace-pre-line mb-6">
                        {instructions}
                    </div>
                )}

                <p className="text-xs text-muted-foreground mb-6">
                    {t('billing.pending_reference')} <code className="font-mono bg-muted px-1.5 py-0.5 rounded">{reference}</code>
                </p>
                <Link href="/settings/billing" className="text-primary text-sm hover:underline">{t('common.back')}</Link>
            </div>
        </AppLayout>
    );
}