import React from 'react';
import Header from '@/components/Header';
import HomeContent from '@/components/home/HomeContent';
import { useBudget } from '@/contexts/budget/BudgetContext';
import { BudgetData } from '@/contexts/budget/types';

// 기본 예산 데이터 (빈 객체 대신 사용할 더미 데이터)
const defaultBudgetData: BudgetData = {
  daily: {
    targetAmount: 0,
    spentAmount: 0,
    remainingAmount: 0
  },
  weekly: {
    targetAmount: 0,
    spentAmount: 0,
    remainingAmount: 0
  },
  monthly: {
    targetAmount: 0,
    spentAmount: 0,
    remainingAmount: 0
  }
};

/**
 * 인덱스 페이지의 주요 내용을 담당하는 컴포넌트
 */
const IndexContent: React.FC = () => {
  const {
    transactions,
    budgetData,
    selectedTab,
    setSelectedTab,
    handleBudgetGoalUpdate,
    updateTransaction,
    getCategorySpending
  } = useBudget();

  return (
    <div className="max-w-md mx-auto px-6">
      <Header />

      <HomeContent 
        transactions={transactions || []}
        budgetData={budgetData || defaultBudgetData} 
        selectedTab={selectedTab}
        setSelectedTab={setSelectedTab}
        handleBudgetGoalUpdate={handleBudgetGoalUpdate}
        updateTransaction={updateTransaction}
        getCategorySpending={getCategorySpending}
      />
    </div>
  );
};

export default IndexContent;