"use client";

import React, { useState } from 'react';

interface TabItem {
  id: string;
  label: string;
}

interface Props {
  tabs: TabItem[];
  children: React.ReactNode;
}

export function TabsClientWrapper({ tabs, children }: Props) {
  const [activeIndex, setActiveIndex] = useState(0);
  const childrenArray = React.Children.toArray(children);

  return (
    <>
      <div className="flex flex-wrap justify-center gap-4 mb-10">
        {tabs.map((tab, i) => {
          const isActive = i === activeIndex;
          return (
            <button
              key={`tab-btn-${i}`}
              onClick={() => setActiveIndex(i)}
              className={`px-8 py-3.5 rounded-full font-bold text-sm md:text-base transition-all duration-300 shadow-sm ${
                isActive
                  ? 'bg-brand-primary text-white shadow-lg scale-105 border border-brand-primary'
                  : 'bg-white text-gray-600 border border-gray-200 hover:bg-gray-50'
              }`}
            >
              {tab.label || `Tab ${i + 1}`}
            </button>
          );
        })}
      </div>

      <div className="w-full relative">
        {childrenArray.map((child, i) => (
          <div
            key={`zone-panel-${i}`}
            style={{ display: i === activeIndex ? 'block' : 'none' }}
            className="w-full"
          >
            {child}
          </div>
        ))}
      </div>
    </>
  );
}
