import { useState } from "react";
import RadioGroup from "@/app/components/customization/RadioGroup";

interface TabNode {
  label: string;
  children?: TabNode[];
  options?: {
    label: string;
    image: string;
    value: string;
  }[];
}

interface Props {
  data: TabNode[];
  level: number;
  path: string;
  onSelect: (path: string, value: string) => void;
}

const TabPanel: React.FC<Props> = ({ data, level, path, onSelect }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const activeNode = data[activeIndex];

  return (
    <div className="flex w-full flex-col">
      <div className="mb-4 flex w-full items-center justify-center gap-4">
        {data.map((tab, i) => (
          <button
            key={i}
            onClick={() => setActiveIndex(i)}
            className={`px-4 font-macropolo uppercase tracking-wider py-2 ${i === activeIndex ? "bg-gray-950 text-white" : "bg-gray-200"}`}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="flex w-full flex-col">
        {activeNode.children ? (
          <TabPanel
            data={activeNode.children}
            level={level + 1}
            path={`${path}.${activeIndex}`}
            onSelect={onSelect}
          />
        ) : activeNode.options ? (
          <RadioGroup
            options={activeNode.options}
            path={`${path}.${activeIndex}`}
            onChange={onSelect}
          />
        ) : null}
      </div>
    </div>
  );
};

export default TabPanel;