import { useTranslation } from "react-i18next";
import { LucideIcon } from "../../lib/iconData";

interface OnboardingDoneProps {
	itemsCreated: number;
	onFinish: () => void;
}

export function OnboardingDone({
	itemsCreated: _itemsCreated,
	onFinish,
}: OnboardingDoneProps) {
	const { t } = useTranslation("onboarding");
	return (
		<div className="flex flex-col items-center justify-center min-h-screen px-8">
			<div className="max-w-2xl text-center">
				<div className="mb-6">
					<LucideIcon
						name="check-circle"
						size={48}
						className="text-gray-400 mx-auto"
					/>
				</div>
				<h1 className="text-3xl font-bold text-gray-900 mb-2">
					{t("done.title")}
				</h1>
				<p className="text-base text-gray-500 mb-8">{t("done.subtitle")}</p>
				<button
					type="button"
					onClick={onFinish}
					className="px-8 py-3 bg-gray-700 hover:bg-gray-800 text-white font-medium rounded-lg transition-colors"
				>
					{t("done.cta")}
				</button>
			</div>
		</div>
	);
}