import { useSetups } from "../hooks/useSetups";
import { useUIStore } from "../stores/uiStore";

interface SetupImpactSelectorProps {
	threadStatus: "active" | "resolved";
}

export function SetupImpactSelector({
	threadStatus,
}: SetupImpactSelectorProps) {
	const { data: setups } = useSetups();
	const selectedSetupId = useUIStore((s) => s.selectedSetupId);
	const setSelectedSetupId = useUIStore((s) => s.setSelectedSetupId);

	if (threadStatus !== "active") return null;
	if (!setups || setups.length === 0) return null;

	return (
		<select
			value={selectedSetupId ?? ""}
			onChange={(e) =>
				setSelectedSetupId(e.target.value ? Number(e.target.value) : null)
			}
			className="border border-gray-200 rounded-lg text-sm px-3 py-1.5 text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-gray-300"
		>
			<option value="">Compare with setup...</option>
			{setups.map((setup) => (
				<option key={setup.id} value={setup.id}>
					{setup.name}
				</option>
			))}
		</select>
	);
}
