
import React, { useEffect } from 'react';
import NavBar from '../components/NavBar';
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import BudgetTabContent from '@/components/BudgetTabContent';
import RecentTransactionsSection from '@/components/RecentTransactionsSection';
import Header from '@/components/Header';
import { useBudget } from '@/contexts/budget';
import SafeAreaContainer from '@/components/SafeAreaContainer';

const Index = () => {
  const { transactions, budgetData } = useBudget();
  
  // 페이지 마운트 시 데이터 로깅 (디버깅 용도)
  useEffect(() => {
    console.info('Index 페이지 마운트, 현재 데이터 상태:');
    console.info('트랜잭션:', transactions.length);
    console.info('예산 데이터:', budgetData);
  }, [transactions, budgetData]);
  
  return (
    <SafeAreaContainer className="min-h-screen bg-neuro-background">
      <div className="max-w-md mx-auto px-6">
        <Header />
        
        <Tabs defaultValue="budget" className="w-full mt-4">
          <TabsList className="grid w-full grid-cols-2 mb-8">
            <TabsTrigger value="budget">예산</TabsTrigger>
            <TabsTrigger value="recent">최근 거래</TabsTrigger>
          </TabsList>
          
          <TabsContent value="budget" className="focus-visible:outline-none">
            <BudgetTabContent budgetData={budgetData.monthly} />
          </TabsContent>
          
          <TabsContent value="recent" className="focus-visible:outline-none">
            <RecentTransactionsSection />
          </TabsContent>
        </Tabs>
      </div>
      
      <NavBar />
    </SafeAreaContainer>
  );
};

export default Index;
