
import React from 'react';
import { Calendar, Search, ChevronLeft, ChevronRight } from 'lucide-react';
import { formatCurrency } from '@/utils/formatters';

interface TransactionsHeaderProps {
  selectedMonth: string;
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  handlePrevMonth: () => void;
  handleNextMonth: () => void;
  budgetData: any;
  totalExpenses: number;
  isDisabled: boolean;
}

const TransactionsHeader: React.FC<TransactionsHeaderProps> = ({
  selectedMonth,
  searchQuery,
  setSearchQuery,
  handlePrevMonth,
  handleNextMonth,
  budgetData,
  totalExpenses,
  isDisabled
}) => {
  console.log('TransactionsHeader 렌더링:', { selectedMonth, totalExpenses });
  
  // 예산 정보가 없는 경우 기본값 사용
  const targetAmount = budgetData?.monthly?.targetAmount || 0;
  
  return (
    <header className="py-8">
      <h1 className="text-2xl font-bold neuro-text mb-5">지출 내역</h1>
      
      {/* Search */}
      <div className="neuro-pressed mb-5 flex items-center px-4 py-3 rounded-xl">
        <Search size={18} className="text-gray-500 mr-2" />
        <input 
          type="text" 
          placeholder="지출 검색..." 
          className="bg-transparent flex-1 outline-none text-sm"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          disabled={isDisabled}
        />
      </div>
      
      {/* Month Selector */}
      <div className="flex items-center justify-between mb-5">
        <button 
          className="neuro-flat p-2 rounded-full"
          onClick={handlePrevMonth}
          disabled={isDisabled}
        >
          <ChevronLeft size={20} />
        </button>
        
        <div className="flex items-center gap-2">
          <Calendar size={18} className="text-neuro-income" />
          <span className="font-medium text-lg">{selectedMonth}</span>
        </div>
        
        <button 
          className="neuro-flat p-2 rounded-full"
          onClick={handleNextMonth}
          disabled={isDisabled}
        >
          <ChevronRight size={20} />
        </button>
      </div>
      
      {/* Summary */}
      <div className="grid grid-cols-2 gap-4 mb-8">
        <div className="neuro-card">
          <p className="text-sm text-gray-500 mb-1">총 예산</p>
          <p className="text-lg font-bold text-neuro-income">
            {formatCurrency(targetAmount)}
          </p>
        </div>
        <div className="neuro-card">
          <p className="text-sm text-gray-500 mb-1">총 지출</p>
          <p className="text-lg font-bold text-neuro-income">
            {formatCurrency(totalExpenses)}
          </p>
        </div>
      </div>
    </header>
  );
};

export default TransactionsHeader;
