import { LucideIcon } from "../../lib/iconData";

interface HobbyCardProps {
	name: string;
	icon: string;
	descriptor: string;
	selected: boolean;
	onClick: () => void;
}

export function HobbyCard({
	name,
	icon,
	descriptor,
	selected,
	onClick,
}: HobbyCardProps) {
	return (
		<button
			type="button"
			onClick={onClick}
			className={`w-40 h-40 flex flex-col items-center justify-center gap-3 p-5 rounded-2xl cursor-pointer transition-all ${
				selected
					? "bg-gray-800 border border-gray-800 ring-2 ring-gray-700/20"
					: "bg-gray-50 border border-gray-200 hover:border-gray-300 hover:shadow-sm"
			}`}
		>
			<LucideIcon
				name={icon}
				size={32}
				className={selected ? "text-white" : "text-gray-700"}
			/>
			<div className="text-center">
				<div
					className={`text-sm font-semibold ${selected ? "text-white" : "text-gray-900"}`}
				>
					{name}
				</div>
				<div
					className={`text-xs ${selected ? "text-gray-300" : "text-gray-400"}`}
				>
					{descriptor}
				</div>
			</div>
		</button>
	);
}
