// storage/components/LinkPreviewCard.jsx
// Asume que React está disponible globalmente.
const LinkPreviewCard = ({ url, originalContent }) => {
    let hostname = '';
    try {
        hostname = new URL(url).hostname;
    } catch (e) {
        console.error("URL inválida en LinkPreviewCard:", url, e);
    }

    const defaultTitle = `Enlace: ${hostname}`;
    const defaultDescription = `Haz clic para visitar ${hostname}.`;
    const defaultImageUrl = `https://placehold.co/120x80/e0e0e0/333333?text=LINK`; 

    const messageParts = originalContent.split(url);
    const textBeforeLink = messageParts[0].trim();
    const textAfterLink = messageParts[1] ? messageParts[1].trim() : '';

    return (
        <div className="mt-2">
            {textBeforeLink && (
                <p className="text-sm sm:text-base break-words mb-2">{textBeforeLink}</p>
            )}
            <a href={url} target="_blank" rel="noopener noreferrer" 
                className="block border border-gray-300 rounded-lg overflow-hidden shadow-md 
                           hover:shadow-lg transition-shadow duration-200 ease-in-out bg-white">
                <div className="flex items-center">
                    <img 
                        src={defaultImageUrl} 
                        alt="Vista previa de enlace" 
                        className="w-20 h-20 sm:w-24 sm:h-24 object-cover flex-shrink-0" 
                        onError={(e) => { e.target.onerror = null; e.target.src = defaultImageUrl; }}
                    />
                    <div className="p-2 sm:p-3 flex-1">
                        <p className="font-semibold text-sm sm:text-base text-blue-700 break-words">{defaultTitle}</p>
                        <p className="text-xs sm:text-sm text-gray-600 mt-1 line-clamp-2">{defaultDescription}</p>
                        <p className="text-xs text-gray-500 mt-1 truncate">{url}</p>
                    </div>
                </div>
            </a>
            {textAfterLink && (
                <p className="text-sm sm:text-base break-words mt-2">{textAfterLink}</p>
            )}
        </div>
    );
};