import { useTranslation } from "react-i18next";
import { HOBBIES } from "@/shared/hobbyConfig";
import { HobbyCard } from "./HobbyCard";

interface OnboardingHobbyPickerProps {
	selectedHobbies: string[];
	onToggleHobby: (hobbyId: string) => void;
	onContinue: () => void;
}

export function OnboardingHobbyPicker({
	selectedHobbies,
	onToggleHobby,
	onContinue,
}: OnboardingHobbyPickerProps) {
	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">
				<h1 className="text-3xl font-bold text-gray-900 mb-2">
					{t("hobby.title")}
				</h1>
				<p className="text-base text-gray-500 mb-8">{t("hobby.subtitle")}</p>
				<div className="flex flex-wrap justify-center gap-4 mb-8">
					{HOBBIES.map((hobby) => (
						<HobbyCard
							key={hobby.id}
							name={hobby.name}
							icon={hobby.icon}
							descriptor={hobby.descriptor}
							selected={selectedHobbies.includes(hobby.id)}
							onClick={() => onToggleHobby(hobby.id)}
						/>
					))}
				</div>
				<button
					type="button"
					onClick={onContinue}
					disabled={selectedHobbies.length === 0}
					className="px-8 py-3 bg-gray-700 hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
				>
					{t("hobby.continue")}
				</button>
			</div>
		</div>
	);
}