import { __ } from "@wordpress/i18n"

export default function Step5({ progress, message }) {
    return (
       <div className="h-full flex flex-col justify-center items-center p-8 text-center">
            <h2 className="text-2xl font-semibold mb-4">{__('Setting Up Your Store...', 'shopbuild')}</h2>
            <p className="mb-4 text-gray-600">{message}</p>
            <div className="w-full bg-gray-200 rounded-full h-4 max-w-xl">
                <div
                    className="bg-blue-600 h-4 rounded-full transition-all"
                    style={{ width: `${progress}%` }}
                />
            </div>
            {progress === 100 && (
                <>
                    <div className="mt-6 animate-bounce text-4xl text-yellow-500 font-extrabold">🎉 BOOM! 🎉</div>
                    <p className="text-green-600 font-semibold mb-4">{__('Setup Complete!', 'shopbuild')}</p>
                    <a href="/" className="px-6 py-3 bg-blue-600 text-white rounded">{__('Visit Your Site', 'shopbuild')}</a>
                </>
            )}
        </div>
    );
}