"use client";

import React, { useState } from 'react';

interface ProductTabsWrapperProps {
  descriptionHtml: React.ReactNode;
  specsHtml: React.ReactNode;
  showSpecifications?: boolean;
}

type TabId = 'description' | 'specs';

const TAB_LINE = 'border-[#e0e0e0]';
const BOX = 'border border-[#e0e0e0]';

export const ProductTabsWrapper: React.FC<ProductTabsWrapperProps> = ({
  descriptionHtml,
  specsHtml,
  showSpecifications = true,
}) => {
  const [activeTab, setActiveTab] = useState<TabId>('description');

  const tabs: { id: TabId; label: string }[] = [
    { id: 'description', label: 'Description' },
    ...(showSpecifications ? [{ id: 'specs' as TabId, label: 'Specifications' }] : []),
  ];

  return (
    <div id="product-tabs" className="bg-white mb-10 text-left">
      {/* Tab Headers */}
      <div className={`flex justify-center items-end gap-8 md:gap-12 border-b ${TAB_LINE} overflow-x-auto no-scrollbar`}>
        {tabs.map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button
              key={tab.id}
              type="button"
              onClick={() => setActiveTab(tab.id)}
              className={`-mb-px pb-[13px] text-[14px] leading-none whitespace-nowrap cursor-pointer border-b-2 transition-colors ${
                isActive
                  ? 'border-primary text-[#222]'
                  : 'border-transparent text-[#9a9a9a] hover:text-[#555]'
              }`}
            >
              {tab.label}
            </button>
          );
        })}
      </div>

      {/* Tab Panels */}
      <div className={`mt-5 ${BOX} bg-white`}>

        {/* ── Description ── */}
        <div className={activeTab === 'description' ? 'block' : 'hidden'}>
          {descriptionHtml ? (
            descriptionHtml
          ) : (
            <p className="text-[13px] text-gray-400 py-8 text-center">
              No description available for this product.
            </p>
          )}
        </div>

        {/* ── Specifications ── */}
        <div className={activeTab === 'specs' ? 'block' : 'hidden'}>
          {specsHtml}
        </div>

      </div>
    </div>
  );
};