// [nexus] Three-card mode selector for onboarding wizard step 2
import { cn } from "@/lib/utils";
import type { NexusMode } from "@/api/hardware";

interface ModeSelectorProps {
  value: NexusMode;
  onChange: (mode: NexusMode) => void;
}

const MODES: { id: NexusMode; label: string; description: string }[] = [
  {
    id: "personal_ai",
    label: "Personal AI Assistant",
    description: "Always available, persistent memory, private.",
  },
  {
    id: "project_builder",
    label: "Project Builder",
    description: "Brainstorm -> PM -> Engineer -> shipped product.",
  },
  {
    id: "both",
    label: "Both (recommended)",
    description: "A conversation becomes a project with one click.",
  },
];

export function ModeSelector({ value, onChange }: ModeSelectorProps) {
  return (
    <div className="grid gap-3">
      {MODES.map((mode) => (
        <button
          key={mode.id}
          type="button"
          onClick={() => onChange(mode.id)}
          className={cn(
            "flex flex-col gap-1 rounded-lg border p-4 text-left transition-colors",
            value === mode.id
              ? "border-primary bg-primary/5"
              : "border-border hover:border-muted-foreground/50"
          )}
        >
          <span className="font-medium text-sm">{mode.label}</span>
          <span className="text-xs text-muted-foreground">{mode.description}</span>
        </button>
      ))}
    </div>
  );
}
