// @/components/ProductTabsClient.tsx (客户端组件)
'use client';
import { useTranslations } from 'next-intl';
import { useState } from 'react';

type ProductTabsClientProps = {
  detail: string;
  spec: string[];
  packaging: string;
  locale: string;
  models: string[];
};

// 纯客户端交互组件（仅处理标签页切换）
export default function ProductTabsClient({ detail, models, spec, packaging, locale }: ProductTabsClientProps) {
  const [activeTab, setActiveTab] = useState('spec'); // 仅客户端使用状态
  const t = useTranslations("Product");

  return (
    <div className="border rounded">
      {/* 标签栏 */}
      <div className="flex border-b">
        <button
          className={`px-4 py-2 border-r transition-colors ${activeTab === 'detail' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
          onClick={() => setActiveTab('detail')}
        >
          {t('productModel')}
        </button>
        <button
          className={`px-4 py-2 border-r transition-colors ${activeTab === 'spec' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
          onClick={() => setActiveTab('spec')}
        >
          {t('productSpec')}
        </button>
        <button
          className={`px-4 py-2 transition-colors ${activeTab === 'packaging' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
          onClick={() => setActiveTab('packaging')}
        >
          {t('productPacking')}
        </button>
      </div>
      {/* 内容区 */}
      <div className="p-4">
        {activeTab === 'detail' && <div className="text-gray-800">
          {models.map((item, idx) => <div key={idx}>{item}</div>) || t('productNoDetail')}
        </div>}
        {activeTab === 'spec' && (
          spec.length > 0 ? (
            <div className="space-y-1 text-gray-800">
              {spec.map((item, idx) => <div key={idx}>{item}</div>)}
            </div>
          ) : (
            <p className="text-gray-500">{t('productNoSpec')}</p>
          )
        )}
        {activeTab === 'packaging' && <div className="text-gray-800">{packaging || t('productNoPacking')}</div>}
      </div>
    </div>
  );
}