"use client";

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

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

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

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

  return (
    <div className="flex min-w-0 flex-col gap-4">
      <ScrollableNav ariaLabel={label} className="w-full min-w-0">
        <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)}
              className="aria-pressed:bg-primary aria-pressed:text-primary-foreground"
            >
              {labels?.[index] || `Condition ${index + 1}`}
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </ScrollableNav>
      {items[Number(active)]}
    </div>
  );
}