/**
 * Tabs 组件
 * 用于公有/专用/自建三级切换
 * 支持响应式设计和移动端优化
 */
import React from "react";
import type { LucideIcon } from "lucide-react";

export interface TabItem {
  id: string;
  label: string;
  icon?: LucideIcon;
  badge?: string;
  badgeColor?: string;
}

export interface TabsProps {
  tabs: TabItem[];
  activeTab: string;
  onChange: (tabId: string) => void;
  className?: string;
}

export const Tabs: React.FC<TabsProps> = ({
  tabs,
  activeTab,
  onChange,
  className = "",
}) => {
  return (
    <div className={`border-b border-slate-200 ${className}`}>
      {/* 添加水平滚动支持（移动端优化） */}
      <div className="flex gap-2 sm:gap-4 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const isActive = activeTab === tab.id;

          return (
            <button
              key={tab.id}
              onClick={() => onChange(tab.id)}
              className={`
                flex items-center gap-1.5 sm:gap-2 px-3 py-2 sm:px-4 sm:py-3 
                text-xs sm:text-sm font-medium border-b-2 transition-all
                whitespace-nowrap flex-shrink-0
                ${
                  isActive
                    ? "border-blue-500 text-blue-400"
                    : "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
                }
              `}
            >
              {Icon && <Icon className="w-3.5 h-3.5 sm:w-4 sm:h-4" />}
              <span>{tab.label}</span>
              {tab.badge && (
                <span
                  className={`
                    px-1.5 sm:px-2 py-0.5 text-[10px] sm:text-xs rounded-full
                    ${
                      tab.badgeColor ||
                      "bg-slate-100 text-slate-700 border border-slate-300"
                    }
                  `}
                >
                  {tab.badge}
                </span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
};

interface TabPanelProps {
  value: string;
  activeTab: string;
  children: React.ReactNode;
}

export const TabPanel: React.FC<TabPanelProps> = ({
  value,
  activeTab,
  children,
}) => {
  if (value !== activeTab) return null;

  return <div className="mt-6">{children}</div>;
};

