import { Button } from '@/components/ui/button';

/**
 * OnboardingStepError
 *
 * Escape hatch for the three async waiting steps (LoadingProfile,
 * LoadingTaglines, Complete): the message plus a "Try Again" that re-queues
 * the job. Shared so the three can't drift apart.
 *
 * @param {string} message - What went wrong, in user terms.
 * @param {Function} onRetry
 * @param {boolean} [isRetrying=false]
 */
const OnboardingStepError = ({ message, onRetry, isRetrying = false }) => (
	<div className="flex flex-col items-center justify-center py-16 px-6">
		<div className="w-full max-w-2xl">
			<div className="p-6 bg-destructive/10 border border-destructive/20 rounded-lg text-center">
				<p className="paragraph-regular text-destructive mb-4">
					{message}
				</p>
				<Button onClick={onRetry} disabled={isRetrying}>
					{isRetrying ? 'Retrying...' : 'Try Again'}
				</Button>
			</div>
		</div>
	</div>
);

export default OnboardingStepError;