'use client';

import { signOut } from 'next-auth/react';
import { Clock, ShieldAlert } from 'lucide-react';
import { Button } from '@/components/ui';

export default function PageContent() {
    return (
        <div className="min-h-screen bg-slate-50 flex items-center justify-center p-4">
            <div className="bg-white max-w-md w-full rounded-2xl shadow-xl p-8 text-center border border-slate-100">
                <div className="flex justify-center mb-6">
                    <div className="bg-amber-100 p-4 rounded-full">
                        <Clock className="size-12 text-amber-600" />
                    </div>
                </div>

                <h1 className="text-2xl font-bold text-slate-800 mb-2">Account Pending Approval</h1>
                <p className="text-slate-500 mb-8 leading-relaxed">
                    Your account has been created but requires administrator approval before you can access the dashboard.
                    Please contact an administrator to activate your account.
                </p>

                <div className="space-y-4">
                    <Button
                        variant="primary"
                        size="lg"
                        onClick={() => signOut({ callbackUrl: '/login' })}
                        className="w-full bg-slate-800 hover:bg-slate-900 text-white font-bold rounded-xl shadow-lg shadow-slate-200"
                    >
                        Sign Out
                    </Button>
                </div>

                <div className="mt-8 pt-6 border-t border-slate-50">
                    <div className="flex items-center justify-center gap-2 text-xs text-slate-400">
                        <ShieldAlert className="size-3" />
                        <span>Restricted Access Mode</span>
                    </div>
                </div>
            </div>
        </div>
    );
}