import { memo } from 'react';
import { Edit2, Save, X } from 'lucide-react';
interface Trade {
id: number;
symbol: string;
trade_date: string;
trade_type: 'buy' | 'sell';
quantity: number;
price: number;
exchange: string;
order_id: string;
}
interface TradeRowProps {
trade: Trade;
isEditing: boolean;
editValues: { symbol?: string; quantity?: string; price?: string };
onStartEdit: (trade: Trade) => void;
onSave: (tradeId: number) => void;
onCancel: () => void;
onEditChange: (values: { symbol?: string; quantity?: string; price?: string }) => void;
formatDate: (date: string) => string;
formatCurrency: (amount: number) => string;
}
// Memoized TradeRow component to prevent unnecessary re-renders
export const TradeRow = memo(function TradeRow({
trade,
isEditing,
editValues,
onStartEdit,
onSave,
onCancel,
onEditChange,
formatDate,
formatCurrency,
}: TradeRowProps) {
const qty = parseFloat(trade.quantity.toString());
const price = parseFloat(trade.price.toString());
return (
<tr className={`hover:bg-gray-50 ${isEditing ? 'bg-blue-50' : ''}`}>
{/* Symbol */}
<td className="px-4 py-3 text-sm">
{isEditing ? (
<input
type="text"
value={editValues.symbol || ''}
onChange={(e) => onEditChange({ ...editValues, symbol: e.target.value.toUpperCase() })}
className="w-full px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
/>
) : (
<span className="font-medium text-gray-900">{trade.symbol}</span>
)}
</td>
{/* Date */}
<td className="px-4 py-3 text-sm text-gray-900">
{formatDate(trade.trade_date)}
</td>
{/* Type */}
<td className="px-4 py-3 text-sm">
<span className={`px-2 py-1 rounded text-xs font-medium ${
trade.trade_type === 'buy'
? 'bg-green-100 text-green-800'
: 'bg-red-100 text-red-800'
}`}>
{trade.trade_type.toUpperCase()}
</span>
</td>
{/* Quantity */}
<td className="px-4 py-3 text-sm text-right text-gray-900">
{isEditing ? (
<input
type="number"
step="0.01"
value={editValues.quantity || ''}
onChange={(e) => onEditChange({ ...editValues, quantity: e.target.value })}
className="w-24 px-2 py-1 border border-gray-300 rounded text-sm text-right focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
/>
) : (
qty.toFixed(2)
)}
</td>
{/* Price */}
<td className="px-4 py-3 text-sm text-right text-gray-900">
{isEditing ? (
<input
type="number"
step="0.01"
value={editValues.price || ''}
onChange={(e) => onEditChange({ ...editValues, price: e.target.value })}
className="w-32 px-2 py-1 border border-gray-300 rounded text-sm text-right focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900"
/>
) : (
formatCurrency(price)
)}
</td>
{/* Value */}
<td className="px-4 py-3 text-sm text-right font-medium text-gray-900">
{isEditing
? formatCurrency(parseFloat(editValues.quantity || '0') * parseFloat(editValues.price || '0'))
: formatCurrency(qty * price)
}
</td>
{/* Exchange */}
<td className="px-4 py-3 text-sm text-gray-700">
{trade.exchange || 'N/A'}
</td>
{/* Actions */}
<td className="px-4 py-3 text-sm text-center">
{isEditing ? (
<div className="flex items-center justify-center gap-2">
<button
onClick={() => onSave(trade.id)}
className="p-1 text-green-600 hover:bg-green-100 rounded"
title="Save"
>
<Save className="h-4 w-4" />
</button>
<button
onClick={onCancel}
className="p-1 text-red-600 hover:bg-red-100 rounded"
title="Cancel"
>
<X className="h-4 w-4" />
</button>
</div>
) : (
<button
onClick={() => onStartEdit(trade)}
className="p-1 text-blue-600 hover:bg-blue-100 rounded"
title="Edit"
>
<Edit2 className="h-4 w-4" />
</button>
)}
</td>
</tr>
);
});
