import { Head, Link } from '@inertiajs/react';
import { CheckCircle2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { login } from '@/routes';

type Props = {
    pending_approval: boolean;
    authenticated: boolean;
};

export default function InvestmentEmailConfirmed({
    pending_approval,
    authenticated,
}: Props) {
    return (
        <>
            <Head title="Inversión confirmada" />

            <div className="space-y-6 text-center">
                <div className="mx-auto flex size-12 items-center justify-center rounded-full bg-primary/10 text-primary">
                    <CheckCircle2 className="size-6" aria-hidden />
                </div>

                <div className="space-y-2">
                    <p className="text-foreground text-sm font-medium">
                        Tu confirmación se registró correctamente.
                    </p>
                    {pending_approval ? (
                        <p className="text-muted-foreground text-sm leading-relaxed">
                            La inversión quedó pendiente de aprobación por el
                            equipo.
                        </p>
                    ) : (
                        <p className="text-muted-foreground text-sm leading-relaxed">
                            La inversión ya está activa en tu cuenta.
                        </p>
                    )}
                </div>

                <Button asChild className="w-full">
                    {authenticated ? (
                        <Link href="/mis-inversiones">Ver mis inversiones</Link>
                    ) : (
                        <Link href={login()}>Iniciar sesión</Link>
                    )}
                </Button>
            </div>
        </>
    );
}

InvestmentEmailConfirmed.layout = {
    title: 'Inversión confirmada',
    description: 'El enlace de tu correo se procesó con éxito.',
};
