Model Selector

import { useState } from "react";
import { ModelSelector, type AIModel } from "@/components/ui/model-selector";

const models: AIModel[] = [
  {
    id: "gpt-4o",
    name: "GPT-4o",
    provider: "OpenAI",
    icon: "https://example.com/openai-icon.svg",
    isPro: true,
    description: "Most capable model for complex tasks",
  },
  {
    id: "claude-3.5",
    name: "Claude 3.5 Sonnet",
    provider: "Anthropic",
    icon: "https://example.com/anthropic-icon.svg",
    isPro: true,
    description: "Advanced reasoning and analysis",
  },
  {
    id: "gemini-pro",
    name: "Gemini Pro",
    provider: "Google",
    description: "Fast and efficient for most tasks",
  },
];

export default function Example() {
  const [selectedModel, setSelectedModel] = useState(models[0]);

  return (
    <ModelSelector
      models={models}
      selectedModel={selectedModel}
      onSelect={setSelectedModel}
    />
  );
}

export interface AIModel {
  id: string;
  name: string;
  provider: string;
  icon?: string;
  isPro?: boolean;
  description?: string;
}

export interface ModelSelectorProps {
  models: AIModel[];
  selectedModel: AIModel;
  onSelect: (model: AIModel) => void;
  disabled?: boolean;
  className?: string;
}