'use client';

import React from 'react';
import type { Locale } from '@/lib/locale';
import { pickLocaleText } from '@/lib/locale';

interface MainTabsProps {
  activeTab: 'topup' | 'subscribe';
  onTabChange: (tab: 'topup' | 'subscribe') => void;
  showSubscribeTab: boolean;
  isDark: boolean;
  locale: Locale;
}

export default function MainTabs({ activeTab, onTabChange, showSubscribeTab, isDark, locale }: MainTabsProps) {
  if (!showSubscribeTab) return null;

  const tabs: { key: 'topup' | 'subscribe'; label: string }[] = [
    { key: 'topup', label: pickLocaleText(locale, '按量付费', 'Pay-as-you-go') },
    { key: 'subscribe', label: pickLocaleText(locale, '包月套餐', 'Subscription') },
  ];

  return (
    <div
      className={[
        'inline-flex rounded-xl p-1',
        isDark ? 'bg-slate-800' : 'bg-slate-100',
      ].join(' ')}
    >
      {tabs.map((tab) => {
        const isActive = activeTab === tab.key;
        return (
          <button
            key={tab.key}
            type="button"
            onClick={() => onTabChange(tab.key)}
            className={[
              'rounded-lg px-5 py-2 text-sm font-medium transition-all',
              isActive
                ? isDark
                  ? 'bg-slate-700 text-slate-100 shadow-sm'
                  : 'bg-white text-slate-900 shadow-sm'
                : isDark
                  ? 'text-slate-400 hover:text-slate-200'
                  : 'text-slate-500 hover:text-slate-700',
            ].join(' ')}
          >
            {tab.label}
          </button>
        );
      })}
    </div>
  );
}