import { Card, CardContent } from '@/components/ui/card';
import { ServerCrash } from 'lucide-react';

interface ServerOfflineProps {
    message?: string;
}

export const ServerOffline = ({ message = 'The game server is currently offline. Top-up is not available at this time. Please try again later.' }: ServerOfflineProps) => {
    return (
        <div className="flex items-center justify-center min-h-[400px]">
            <Card className="max-w-md">
                <CardContent className="pt-6">
                    <div className="flex flex-col items-center text-center space-y-4">
                        <ServerCrash className="h-12 w-12 text-red-500" />
                        <h3 className="text-lg font-semibold">Server Offline</h3>
                        <p className="text-muted-foreground">
                            {message}
                        </p>
                    </div>
                </CardContent>
            </Card>
        </div>
    );
};