'use client';

import PricingCardOne from './PricingCardOne';

interface NutritionPlan {
  id: string;
  badge: string;
  badgeIcon?: any;
  price: string;
  subtitle: string;
  features: string[];
}

interface PricingCardOneWithSavingProps {
  title: string;
  description: string;
  tag?: string;
  tagIcon?: any;
  plans: NutritionPlan[];
  animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
  textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image';
  useInvertedBackground: boolean;
  onNutritionPlanSelected?: (planData: any) => void;
}

export function PricingCardOneWithSaving({
  title,
  description,
  tag,
  tagIcon,
  plans,
  animationType,
  textboxLayout,
  useInvertedBackground,
  onNutritionPlanSelected,
}: PricingCardOneWithSavingProps) {
  const handlePlanSelection = (planId: string, planBadge: string) => {
    const nutritionData = {
      type: 'nutrition' as const,
      date: new Date().toISOString().split('T')[0],
      data: {
        plan: planBadge,
        planId,
        selectedAt: Date.now(),
      },
    };
    onNutritionPlanSelected?.(nutritionData);
  };

  const enhancedPlans = plans.map(plan => ({
    ...plan,
  }));

  return (
    <PricingCardOne
      title={title}
      description={description}
      tag={tag}
      tagIcon={tagIcon}
      plans={enhancedPlans as any}
      animationType={animationType}
      textboxLayout={textboxLayout}
      useInvertedBackground={useInvertedBackground}
    />
  );
}

export default PricingCardOneWithSaving;