import React, { useCallback } from 'react';
import TransactionCard, { Transaction } from '@/components/TransactionCard';

interface TransactionDateGroupProps {
  date: string;
  transactions: Transaction[];
  onTransactionDelete: (id: string) => Promise<boolean> | boolean;
}

/**
 * 날짜별 트랜잭션 그룹 컴포넌트 - 성능 및 안정성 개선 버전
 */
const TransactionDateGroup: React.FC<TransactionDateGroupProps> = ({
  date,
  transactions,
  onTransactionDelete
}) => {
  // 메모이즈된 삭제 핸들러로 성능 최적화
  const handleDelete = useCallback(async (id: string): Promise<boolean> => {
    try {
      if (!onTransactionDelete) {
        console.warn('삭제 핸들러가 제공되지 않았습니다');
        return false;
      }
      
      // Promise 반환 여부에 따라 적절히 처리
      const result = await Promise.resolve(onTransactionDelete(id));
      return Boolean(result);
    } catch (error) {
      console.error('트랜잭션 삭제 처리 중 오류:', error);
      return false;
    }
  }, [onTransactionDelete]);

  return (
    <div>
      <div className="flex items-center gap-2 mb-3">
        <div className="h-1 flex-1 neuro-pressed"></div>
        <h2 className="text-sm font-medium text-gray-500">{date}</h2>
        <div className="h-1 flex-1 neuro-pressed"></div>
      </div>
      
      <div className="grid gap-3">
        {transactions.map(transaction => (
          <TransactionCard 
            key={transaction.id} 
            transaction={transaction}
            onDelete={handleDelete}
          />
        ))}
      </div>
    </div>
  );
};

export default React.memo(TransactionDateGroup);