clicktrack/components/settings/OllamaModelPicker.tsx

"use client";

import { RECOMMENDED_OLLAMA_MODELS } from "@/lib/analysis/constants";

interface OllamaModelPickerProps {
  models: string[];
  value: string;
  onChange: (model: string) => void;
  onRefresh: () => void;
  refreshing: boolean;
}

export default function OllamaModelPicker({
  models,
  value,
  onChange,
  onRefresh,
  refreshing,
}: OllamaModelPickerProps) {
  if (models.length === 0) {
    return (
      <p className="text-sm text-zinc-500">
        No models found. Pull a model with{" "}
        <code className="text-zinc-400">ollama pull qwen2.5:7b</code> and refresh.
      </p>
    );
  }

  return (
    <div className="space-y-3">
      <div className="flex flex-col gap-2">
        {models.map((model) => {
          const isRecommended = RECOMMENDED_OLLAMA_MODELS.includes(model);
          return (
            <label key={model} className="flex items-center gap-3 cursor-pointer group">
              <input
                type="radio"
                name="ollama-model"
                value={model}
                checked={value === model}
                onChange={() => onChange(model)}
                className="accent-green-500"
              />
              <span className="text-sm text-zinc-300 group-hover:text-zinc-100 transition-colors">
                {model}
              </span>
              {isRecommended && (
                <span className="text-xs text-amber-400">★ recommended</span>
              )}
            </label>
          );
        })}
      </div>
      <button
        onClick={onRefresh}
        disabled={refreshing}
        className="text-xs text-zinc-500 hover:text-zinc-300 underline disabled:opacity-50"
      >
        {refreshing ? "Refreshing…" : "Refresh model list"}
      </button>
    </div>
  );
}