import React from 'react';
import { Page } from '../types';

interface RegisterSuccessProps {
    setPage: (page: Page) => void;
}

const RegisterSuccess: React.FC<RegisterSuccessProps> = ({ setPage }) => {
    return (
        <div className="min-h-screen bg-background-light dark:bg-background-dark pt-32 pb-12 px-6 flex items-center justify-center">
            <div className="w-full max-w-md bg-white dark:bg-slate-900 p-12 rounded-3xl shadow-xl border border-slate-100 dark:border-slate-800 text-center">
                <div className="w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
                    <span className="material-symbols-outlined text-4xl text-green-600 dark:text-green-400">check_circle</span>
                </div>
                <h2 className="font-display text-3xl mb-4 text-slate-900 dark:text-white">Anmeldung erfolgreich!</h2>
                <p className="text-slate-600 dark:text-slate-400 mb-8 leading-relaxed">
                    Vielen Dank für Ihre Anmeldung. Wir haben Ihre Daten erhalten und freuen uns, Sie bei Riboneo begrüßen zu dürfen.
                </p>
                <button
                    onClick={() => setPage(Page.LOGIN)}
                    className="w-full py-4 bg-primary text-white font-bold rounded-xl hover:bg-opacity-90 transition-all shadow-lg hover:shadow-primary/20"
                >
                    Zum Login
                </button>
                <button
                    onClick={() => setPage(Page.HOME)}
                    className="mt-4 text-sm text-slate-500 hover:text-primary transition-colors"
                >
                    Zurück zur Startseite
                </button>
            </div>
        </div>
    );
};

export default RegisterSuccess;