/**
 * Success Screen Component.
 *
 * Displayed after successful API key connection from platform.
 *
 * @package Sideconvo
 */

import { useAuth } from '../../contexts/AuthContext';
import './success-screen.css';

interface SuccessScreenProps {
	onContinue: () => void;
}

/**
 * SuccessScreen component.
 *
 * @param {SuccessScreenProps} props Component props.
 * @return {JSX.Element} SuccessScreen component.
 */
export default function SuccessScreen({ onContinue }: SuccessScreenProps) {
	return (
		<div className="success-screen">
			<div className="success-screen__container">
				<div className="success-screen__icon">
					<svg
						className="success-screen__checkmark"
						viewBox="0 0 52 52"
						xmlns="http://www.w3.org/2000/svg"
					>
						<circle
							className="success-screen__checkmark-circle"
							cx="26"
							cy="26"
							r="25"
							fill="none"
						/>
						<path
							className="success-screen__checkmark-check"
							fill="none"
							d="M14.1 27.2l7.1 7.2 16.7-16.8"
						/>
					</svg>
				</div>

				<div className="success-screen__content">
					<h1 className="success-screen__title">
						Connection Successful!
					</h1>

					<p className="success-screen__message">
						Your WordPress site is now connected to Sideconvo.
					</p>

					<div className="success-screen__next-steps">
						<h2 className="success-screen__next-steps-title">
							🎉 What's Next?
						</h2>

						<ol className="success-screen__steps-list">
							<li className="success-screen__step">
								<div className="success-screen__step-number">1</div>
								<div className="success-screen__step-content">
									<h3>Select Content Types</h3>
									<p>Choose which posts, pages, and taxonomies to sync</p>
								</div>
							</li>
							<li className="success-screen__step">
								<div className="success-screen__step-number">2</div>
								<div className="success-screen__step-content">
									<h3>Sync Your Content</h3>
									<p>Start syncing your existing content to Sideconvo</p>
								</div>
							</li>
							<li className="success-screen__step">
								<div className="success-screen__step-number">3</div>
								<div className="success-screen__step-content">
									<h3>Customize Your Widget</h3>
									<p>Configure how the Sideconvo widget appears on your site</p>
								</div>
							</li>
						</ol>
					</div>

					<button
						className="success-screen__button"
						onClick={onContinue}
					>
						Continue to Overview →
					</button>
				</div>
			</div>
		</div>
	);
}