Model switcher

"use client";

import { ToggleGroup, ToggleGroupItem } from "@paxeer/core";

export function ModelSwitcher({
  models = ["designx-fast", "designx-reason", "local-stub"],
  value,
  onChange,
}: {
  models?: string[];
  value?: string;
  onChange?: (value: string) => void;
}) {
  return (
    <div data-slot="model-switcher" className="flex flex-col gap-2">
      <p className="text-[length:var(--md-sys-typescale-label-medium-size)] text-on-surface-variant">
        Model
      </p>
      <ToggleGroup
        type="single"
        value={value ?? models[0]}
        onValueChange={(next) => {
          if (next) onChange?.(next);
        }}
        variant="outline"
        className="flex-wrap"
      >
        {models.map((model) => (
          <ToggleGroupItem key={model} value={model}>
            {model}
          </ToggleGroupItem>
        ))}
      </ToggleGroup>
    </div>
  );
}