import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import BudgetTabContent from './BudgetTabContent';
import { BudgetPeriod } from '@/contexts/budget/BudgetContext';

interface BudgetData {
  targetAmount: number;
  spentAmount: number;
  remainingAmount: number;
}

interface BudgetProgressCardProps {
  budgetData: {
    daily: BudgetData;
    weekly: BudgetData;
    monthly: BudgetData;
  };
  selectedTab: string;
  setSelectedTab: (value: string) => void;
  formatCurrency: (amount: number) => string;
  calculatePercentage: (spent: number, target: number) => number;
  onSaveBudget: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
}

const BudgetProgressCard: React.FC<BudgetProgressCardProps> = ({
  budgetData,
  selectedTab,
  setSelectedTab,
  formatCurrency,
  calculatePercentage,
  onSaveBudget
}) => {
  return (
    <div className="neuro-card mb-6 overflow-hidden w-full">
      <Tabs defaultValue="daily" value={selectedTab} onValueChange={setSelectedTab} className="w-full">
        <TabsList className="grid grid-cols-3 mb-4 bg-transparent">
          <TabsTrigger 
            value="daily"
            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
          >
            오늘
          </TabsTrigger>
          <TabsTrigger 
            value="weekly" 
            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
          >
            주간
          </TabsTrigger>
          <TabsTrigger 
            value="monthly" 
            className="data-[state=active]:shadow-[inset_4px_4px_8px_rgba(209,217,230,0.9),inset_-4px_-4px_8px_rgba(255,255,255,0.9)] data-[state=active]:bg-transparent data-[state=active]:font-medium transition-all duration-200"
          >
            월간
          </TabsTrigger>
        </TabsList>
        
        <div className="text-sm text-gray-600 mb-2 px-1">지출 / 예산</div>

        <TabsContent value="daily" className="space-y-4 mt-0">
          <BudgetTabContent 
            data={budgetData.daily} 
            formatCurrency={formatCurrency} 
            calculatePercentage={calculatePercentage} 
            onSaveBudget={(amount, categoryBudgets) => onSaveBudget('daily', amount, categoryBudgets)} 
          />
        </TabsContent>

        <TabsContent value="weekly" className="space-y-4 mt-0">
          <BudgetTabContent 
            data={budgetData.weekly} 
            formatCurrency={formatCurrency} 
            calculatePercentage={calculatePercentage} 
            onSaveBudget={(amount, categoryBudgets) => onSaveBudget('weekly', amount, categoryBudgets)} 
          />
        </TabsContent>

        <TabsContent value="monthly" className="space-y-4 mt-0">
          <BudgetTabContent 
            data={budgetData.monthly} 
            formatCurrency={formatCurrency} 
            calculatePercentage={calculatePercentage} 
            onSaveBudget={(amount, categoryBudgets) => onSaveBudget('monthly', amount, categoryBudgets)} 
          />
        </TabsContent>
      </Tabs>
    </div>
  );
};

export default BudgetProgressCard;