Mode Selector

import { ModeSelector, type ModeOption } from "@/components/ui/mode-selector";
import { IconInfinity, IconListCheck } from "@tabler/icons-react";

const modes: ModeOption[] = [
  {
    id: "agent",
    label: "Agent",
    icon: IconInfinity,
    description: "Plan and execute tasks autonomously",
  },
  {
    id: "plan",
    label: "Plan",
    icon: IconListCheck,
    description: "Outline steps before acting",
  },
];

export default function Demo() {
  return (
    <div className="flex items-center justify-center w-full min-h-screen bg-background p-8 overflow-hidden">
      <div className="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950 p-12 w-full max-w-md flex items-center justify-center">
        <ModeSelector modes={modes} defaultValue="agent" />
      </div>
    </div>
  );
}