import React from 'react';
import Marquee from 'react-fast-marquee';
import { Link } from 'react-router-dom';
import { FaFire } from 'react-icons/fa';
import DOMPurify from 'dompurify'; // Import DOMPurify

function LatestReviewsMarquee({ reviews }) {
  if (!reviews || reviews.length === 0) {
    return null;
  }

  return (
    <div className="bg-campfire-charcoal py-4 shadow-inner">
      <Marquee gradient={false} speed={40} pauseOnHover={true}>
        {reviews.map(review => {
          const user = review.expand?.user_id;
          const media = review.expand?.media_id;

          if (!user || !media || !user.username || !media.path || !media.title) {
            console.warn(`Skipping review ${review.id} in marquee due to missing expanded user, media, or required fields.`);
            return null;
          }

          // Sanitize and strip HTML from the review content for the marquee
          const cleanContent = DOMPurify.sanitize(review.content, { ALLOWED_TAGS: [] }); // Allow no HTML tags

          return (
            <Link
              key={review.id}
              to={`/media/${media.path}`}
              className="flex items-center mx-6 text-campfire-ash hover:text-campfire-light transition-colors"
            >
              <span className="font-semibold text-campfire-amber mr-2">
                {user.username}:
              </span>
              <span className="mr-2 line-clamp-1 max-w-xs">
                "{cleanContent.substring(0, 50)}{cleanContent.length > 50 ? '...' : ''}" {/* Use cleanContent */}
              </span>
              <span className="flex items-center text-campfire-amber">
                <FaFire className="mr-1" size={14} />
                {review.overall_rating !== undefined && review.overall_rating !== null ? parseFloat(review.overall_rating).toFixed(1) : 'N/A'} / 10
              </span>
               <span className="ml-2 text-sm text-campfire-ash/80">
                  на "{media.title}"
               </span>
            </Link>
          );
        })}
      </Marquee>
    </div>
  );
}

export default LatestReviewsMarquee;
