"use client";

import Image from "@/components/ui/resilient-image";
import { Children, Fragment, type ReactNode, useState } from "react";
import { Separator } from "@/components/ui/separator";
import { ScrollableNav } from "@/components/public/scrollable-nav";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export function ConditionTabIcon({ iconUrl }: { iconUrl?: string | null }) {
  return iconUrl
    ? <Image src={iconUrl} alt="" width={32} height={32} className="size-8 shrink-0 object-contain" aria-hidden="true" data-icon="inline-start" />
    : null;
}

export function ConditionSwitcher({
  children,
  label = "เลือกเงื่อนไข",
  labels,
  iconUrls,
}: {
  children: ReactNode;
  label?: string;
  labels?: readonly string[];
  iconUrls?: readonly (string | null | undefined)[];
}) {
  const items = Children.toArray(children);
  const [active, setActive] = useState("0");

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

  return (
    <Tabs className="w-full 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) => (
            <Fragment key={index}>
              {index > 0 ? <Separator orientation="vertical" aria-hidden="true" className="mx-1 h-7" /> : null}
              <TabsTrigger value={String(index)} className="outline-primary m-2 max-sm:min-h-11">
                <ConditionTabIcon iconUrl={iconUrls?.[index]} />
                <span className="font-medium text-lg">{labels?.[index] || `เงื่อนไข ${index + 1}`}</span>
              </TabsTrigger>
            </Fragment>
          ))}
        </TabsList>
      </ScrollableNav>
      {items.map((item, index) => <TabsContent key={index} value={String(index)} className="text-base">{item}</TabsContent>)}
    </Tabs>
  );
}