Separe mi codigo de esta manera, confirmame con un "Si" si entendes los cambios

Revisa el codigo de abajo y el archivo que te envie.

import { useState } from "react";

const TradeOfferCard = ({ offer, onAccept, onReject, onComment }) => { const [showComments, setShowComments] = useState(false); const [newComment, setNewComment] = useState("");

const handleSubmitComment = (e) => {
    e.preventDefault();
    if (newComment.trim()) {
        onComment(offer.id, newComment);
        setNewComment("");
    }
};

const getStatusIcon = () => {
    switch (offer.status) {
        case "accepted":
            return "✅";
        case "rejected":
            return "❌";
        default:
            return "⏰";
    }
};

const getStatusText = () => {
    switch (offer.status) {
        case "accepted":
            return "Aceptada";
        case "rejected":
            return "Rechazada";
        default:
            return "Pendiente";
    }
};

return (
    <div className="bg-white rounded-lg shadow-lg border border-gray-200 p-6 mb-4">
        {/* Header con estado */}
        <div className="flex items-center justify-between mb-4">
            <div className="flex items-center space-x-2">
                <span className="text-lg">{getStatusIcon()}</span>
                <span className="text-sm font-medium text-gray-600">
                    {getStatusText()}
                </span>
            </div>
            <span className="text-xs text-gray-400">
                {new Date(offer.createdAt).toLocaleDateString()}
            </span>
        </div>

        {/* Información del intercambio */}
        <div className="grid grid-cols-[1fr_auto_1fr] gap-4 items-center mb-4">
            {/* Libro ofrecido */}
            <div className="text-center">
                <div className="flex items-center space-x-3 mb-2">
                    <img
                        src={offer.bookOffered.userImage || "/placeholder.svg"}
                        alt={offer.sender}
                        className="w-8 h-8 rounded-full"
                    />
                    <span className="text-sm font-medium text-gray-700">
                        {offer.sender}
                    </span>
                </div>
                <img
                    src={offer.bookOffered.image || "/placeholder.svg"}
                    alt={offer.bookOffered.title}
                    className="w-16 h-24 mx-auto mb-2 rounded shadow"
                />
                <h4 className="text-sm font-semibold text-gray-800">
                    {offer.bookOffered.title}
                </h4>
                <p className="text-xs text-gray-600">{offer.bookOffered.author}</p>
            </div>

            {/* Flecha de intercambio */}
            <div className="flex flex-col items-center">
                <div className="w-8 h-8 bg-gradient-to-r from-orange-500 to-indigo-600 rounded-full flex items-center justify-center">
                    <span className="text-white text-sm">⇄</span>
                </div>
            </div>

            {/* Libro solicitado */}
            <div className="text-center">
                <div className="flex items-center space-x-3 mb-2 justify-center">
                    <img
                        src={offer.bookRequested.userImage || "/placeholder.svg"}
                        alt={offer.receiver}
                        className="w-8 h-8 rounded-full"
                    />
                    <span className="text-sm font-medium text-gray-700">
                        {offer.receiver}
                    </span>
                </div>
                <img
                    src={offer.bookRequested.image || "/placeholder.svg"}
                    alt={offer.bookRequested.title}
                    className="w-16 h-24 mx-auto mb-2 rounded shadow"
                />
                <h4 className="text-sm font-semibold text-gray-800">
                    {offer.bookRequested.title}
                </h4>
                <p className="text-xs text-gray-600">{offer.bookRequested.author}</p>
            </div>
        </div>

        {/* Mensaje inicial */}
        <div className="bg-gray-50 rounded-lg p-3 mb-4">
            <p className="text-sm text-gray-700">{offer.message}</p>
        </div>

        {/* Botones de acción */}
        {offer.type === "received" && offer.status === "pending" && (
            <div className="flex space-x-3 mb-1">
                <button
                    onClick={() => onAccept(offer.id)}
                    className="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors text-sm font-medium flex items-center justify-center space-x-2"
                >
                    <span>✓</span>
                    <span>Aceptar</span>
                </button>
                <button
                    onClick={() => onReject(offer.id)}
                    className="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium flex items-center justify-center space-x-2"
                >
                    <span>✗</span>
                    <span>Rechazar</span>
                </button>
            </div>
        )}
        {offer.type === "sent" && offer.status === "pending" && (
            <div className="w-full flex justify-end mt-4">
                <button onClick={() => onCancel(offer.id)} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
                >
                    Cancelar
                </button>
            </div>
        )}
    </div>
);

};

export default TradeOfferCard;

Quiero que agregues lo siguiente:

• El pendiente, aceptada rechazada que tenga un rectangulo, detras con colores rojo para rechazadas, verdes para aceptadas y gris para pendientes.

• Agregame un boton que se muestre en las ofertas aceptadas que diga ver datos, esto debe ser un nuevo componente (una modal en otro archivo) Esos datos deben ser los del usuario que te hizo la oferta, como numero de telefono, email, nombre y apellido y los que se te ocurran.

• Quiero tambien que al hacer click en la foto del libro me aparezcan los detalles del libro y la foto un poco ampliada esto tambien debe ser una modal.

• Quiero un filtro que tenga un switch entre ofertas enviadas y recibidas, este filtro debe ser capaz de filtrar por rechazadas, pendientes y aceptadas. tambien de poder filtrar por fecha, de mas viejas a mas nuevas y viceversa. Y por nombre de libro, ya sea enviado o recibido.