"use client";

import { useAgents } from "@/hooks/useAgents";

interface AgentToggleRowProps {
  assignedAgents: string[];
  onToggle: (agentName: string, enabled: boolean) => void;
}

export function AgentToggleRow({ assignedAgents, onToggle }: AgentToggleRowProps) {
  const { agents, loading } = useAgents();

  if (loading) {
    return <p className="text-xs text-zinc-400">Loading agents...</p>;
  }

  return (
    <div className="space-y-2">
      <h4 className="text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
        Agent Assignments
      </h4>
      <div className="flex flex-wrap gap-3">
        {agents.map((agent) => {
          const isAssigned = assignedAgents.includes(agent.name);
          return (
            <label
              key={agent.name}
              className="flex items-center gap-2 rounded-lg border border-zinc-200 px-3 py-2 text-sm transition-colors hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800"
            >
              <input
                type="checkbox"
                checked={isAssigned}
                onChange={() => onToggle(agent.name, !isAssigned)}
                className="h-4 w-4 rounded border-zinc-300 text-blue-600 focus:ring-blue-500 dark:border-zinc-600"
              />
              <span className={isAssigned ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400"}>
                {agent.displayName}
              </span>
            </label>
          );
        })}
      </div>
    </div>
  );
}
