import React from 'react';
import { PlanList } from './index';
import { ProcessedPlanData } from './types';

interface TabContentProps {
  tabValue: string;
  yearlyPlans: ProcessedPlanData[];
  monthlyPlans: ProcessedPlanData[];
  isLoading: boolean;
  error: Error | null;
  onRetry: () => void;
  onSubscribe: (plan: ProcessedPlanData) => void;
  firstPlanCardRef?: React.RefObject<HTMLDivElement | null>;
}

export const TabContent: React.FC<TabContentProps> = ({
  tabValue,
  yearlyPlans,
  monthlyPlans,
  isLoading,
  error,
  onRetry,
  onSubscribe,
  firstPlanCardRef,
}) => {
  return (
    <div>
      {tabValue === 'year' && (
        <PlanList
          plans={yearlyPlans}
          isLoading={isLoading}
          tabValue={tabValue}
          error={error}
          onRetry={onRetry}
          emptyMessage='暂无年付套餐'
          onSubscribe={onSubscribe}
          firstPlanCardRef={firstPlanCardRef}
        />
      )}
      {tabValue === 'month' && (
        <PlanList
          plans={monthlyPlans}
          tabValue={tabValue}
          isLoading={isLoading}
          error={error}
          onRetry={onRetry}
          emptyMessage='暂无月付套餐'
          onSubscribe={onSubscribe}
          firstPlanCardRef={firstPlanCardRef}
        />
      )}
    </div>
  );
};