
import React from 'react';
import { Loader2 } from 'lucide-react';
import { Transaction } from '@/components/TransactionCard';
import TransactionsList from './TransactionsList';
import EmptyTransactions from './EmptyTransactions';

interface TransactionsContentProps {
  isLoading: boolean;
  isProcessing: boolean;
  transactions: Transaction[];
  groupedTransactions: Record<string, Transaction[]>;
  searchQuery: string;
  selectedMonth: string;
  setSearchQuery: (query: string) => void;
  onTransactionDelete: (id: string) => Promise<boolean> | boolean;
  isDisabled: boolean;
}

const TransactionsContent: React.FC<TransactionsContentProps> = ({
  isLoading,
  isProcessing,
  transactions,
  groupedTransactions,
  searchQuery,
  selectedMonth,
  setSearchQuery,
  onTransactionDelete,
  isDisabled
}) => {
  if (isLoading || isProcessing) {
    return <LoadingState isProcessing={isProcessing} />;
  }

  if (!isLoading && !isProcessing && transactions.length === 0) {
    return (
      <EmptyTransactions 
        searchQuery={searchQuery}
        selectedMonth={selectedMonth}
        setSearchQuery={setSearchQuery}
        isDisabled={isDisabled}
      />
    );
  }

  return (
    <TransactionsList 
      groupedTransactions={groupedTransactions}
      onTransactionDelete={onTransactionDelete}
    />
  );
};

const LoadingState: React.FC<{ isProcessing: boolean }> = ({ isProcessing }) => (
  <div className="flex justify-center items-center py-10">
    <Loader2 className="h-8 w-8 animate-spin text-neuro-income" />
    <span className="ml-2 text-gray-500">{isProcessing ? '처리 중...' : '로딩 중...'}</span>
  </div>
);

export default TransactionsContent;
