"use client";

import { Children, type ReactNode, useState } from "react";

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export function ConditionSwitcher({ children, label = "เลือก Condition" }: { children: ReactNode; label?: string }) {
  const items = Children.toArray(children);
  const [active, setActive] = useState("0");

  if (items.length <= 1) return items[0] ?? null;

  return (
    <div className="flex flex-col gap-4">
      <ToggleGroup aria-label={label} variant="outline" value={[active]} onValueChange={(values) => {
        if (values[0]) setActive(values[0]);
      }}>
        {items.map((_, index) => <ToggleGroupItem key={index} value={String(index)}>Condition {index + 1}</ToggleGroupItem>)}
      </ToggleGroup>
      {items[Number(active)]}
    </div>
  );
}