import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import TransactionEditDialog from './TransactionEditDialog';
import TransactionIcon from './transaction/TransactionIcon';
import TransactionDetails from './transaction/TransactionDetails';
import TransactionAmount from './transaction/TransactionAmount';

export type Transaction = {
  id: string;
  title: string;
  amount: number;
  date: string;
  category: string;
  type: 'expense' | 'income';
};

interface TransactionCardProps {
  transaction: Transaction;
  onUpdate?: (updatedTransaction: Transaction) => void;
}

const TransactionCard: React.FC<TransactionCardProps> = ({ 
  transaction,
  onUpdate
}) => {
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
  const { title, amount, date, category, type } = transaction;
  
  const handleSaveTransaction = (updatedTransaction: Transaction) => {
    if (onUpdate) {
      onUpdate(updatedTransaction);
    }
  };
  
  return (
    <>
      <div 
        className="neuro-flat p-4 transition-all duration-300 hover:shadow-neuro-convex animate-scale-in cursor-pointer"
        onClick={() => setIsEditDialogOpen(true)}
      >
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <TransactionIcon category={category} />
            <TransactionDetails title={title} date={date} />
          </div>
          
          <TransactionAmount amount={amount} />
        </div>
      </div>

      <TransactionEditDialog 
        transaction={transaction}
        open={isEditDialogOpen}
        onOpenChange={setIsEditDialogOpen}
        onSave={handleSaveTransaction}
      />
    </>
  );
};

export default TransactionCard;