"use client";

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

import { ScrollableNav } from "@/components/public/scrollable-nav";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

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 (
    <Tabs className="min-w-0 gap-4" value={active} onValueChange={setActive}>
      <ScrollableNav ariaLabel={label} className="w-full min-w-0">
        <TabsList aria-label={label} className="mx-auto shrink-0">
          {items.map((_, index) => (
            <TabsTrigger
              key={index}
              value={String(index)}
            >
              <MousePointerClickIcon className="text-primary group-aria-pressed/tabs:text-primary-foreground" aria-hidden="true" data-icon="inline-start" />
              {labels?.[index] || `Condition ${index + 1}`}
            </TabsTrigger>
          ))}
        </TabsList>
      </ScrollableNav>
      {items.map((item, index) => <TabsContent key={index} value={String(index)} className="text-base">{item}</TabsContent>)}
    </Tabs>
  );
}