import React from 'react';
import BudgetProgressCard from '@/components/BudgetProgressCard';
import BudgetCategoriesSection from '@/components/BudgetCategoriesSection';
import RecentTransactionsSection from '@/components/RecentTransactionsSection';
import EmptyState from './EmptyState';
import { BudgetPeriod } from '@/contexts/budget/BudgetContext';
import { formatCurrency, calculatePercentage } from '@/utils/formatters';
import { Transaction } from '@/contexts/budget/types';

interface HomeContentProps {
  transactions: Transaction[];
  budgetData: {
    daily: {
      targetAmount: number;
      spentAmount: number;
      remainingAmount: number;
    };
    weekly: {
      targetAmount: number;
      spentAmount: number;
      remainingAmount: number;
    };
    monthly: {
      targetAmount: number;
      spentAmount: number;
      remainingAmount: number;
    };
  };
  selectedTab: string;
  setSelectedTab: (value: string) => void;
  handleBudgetGoalUpdate: (type: BudgetPeriod, amount: number, newCategoryBudgets?: Record<string, number>) => void;
  updateTransaction: (transaction: Transaction) => void;
  getCategorySpending: () => Array<{
    title: string;
    current: number;
    total: number;
  }>;
}

const HomeContent: React.FC<HomeContentProps> = ({
  transactions,
  budgetData,
  selectedTab,
  setSelectedTab,
  handleBudgetGoalUpdate,
  updateTransaction,
  getCategorySpending
}) => {
  return (
    <>
      {/* 지출 카테고리 */}
      {getCategorySpending().some(cat => cat.current > 0 || cat.total > 0) ? (
        <BudgetCategoriesSection categories={getCategorySpending()} />
      ) : (
        <EmptyState />
      )}

      {/* 목표 진행 상황 */}
      <h2 className="text-lg font-semibold mb-2 mt-4">월간 예산과 지출</h2>
      <BudgetProgressCard 
        budgetData={budgetData}
        selectedTab={selectedTab}
        setSelectedTab={setSelectedTab}
        formatCurrency={formatCurrency}
        calculatePercentage={calculatePercentage}
        onSaveBudget={handleBudgetGoalUpdate}
      />

      {/* 최근 지출 */}
      {transactions.length > 0 ? (
        <RecentTransactionsSection 
          transactions={transactions.slice(0, 5)} 
          onUpdateTransaction={updateTransaction}
        />
      ) : (
        <div className="mt-4">
          <h2 className="text-lg font-semibold mb-3">최근 지출</h2>
          <EmptyState />
        </div>
      )}
    </>
  );
};

export default HomeContent;