import { memo } from 'react';
import { PhotoGrid } from '@/components/common/PhotoGrid';
import { normalizePhotoData } from '@/lib/photoHelpers';
import type { PhotoItem } from '@/types/photos';
import type { PhotoForDisplay, ModerationItem } from '@/types/moderation';

interface ReviewDisplayProps {
  item: ModerationItem;
  isMobile: boolean;
  onOpenPhotos: (photos: PhotoForDisplay[], index: number) => void;
}

export const ReviewDisplay = memo(({ item, isMobile, onOpenPhotos }: ReviewDisplayProps) => {
  return (
    <div>
      {item.content.title && (
        <h4 className="font-semibold mb-2">{item.content.title}</h4>
      )}
      {item.content.content && (
        <p className="text-sm mb-2">{item.content.content}</p>
      )}
      <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
        <span>Rating: {item.content.rating}/5</span>
      </div>
      
      {/* Entity Names for Reviews */}
      {(item.entity_name || item.park_name) && (
        <div className="space-y-1 mb-2">
          {item.entity_name && (
            <div className="text-sm text-muted-foreground">
              <span className="text-xs">{item.park_name ? 'Ride:' : 'Park:'} </span>
              <span className="text-base font-medium text-foreground">{item.entity_name}</span>
            </div>
          )}
          {item.park_name && (
            <div className="text-sm text-muted-foreground">
              <span className="text-xs">Park: </span>
              <span className="text-base font-medium text-foreground">{item.park_name}</span>
            </div>
          )}
        </div>
      )}
      
      {item.content.photos && item.content.photos.length > 0 && (() => {
        const reviewPhotos: PhotoItem[] = normalizePhotoData({
          type: 'review',
          photos: item.content.photos
        });
        
        return (
          <div className="mt-3">
            <div className="text-sm font-medium mb-2">Attached Photos:</div>
            <PhotoGrid 
              photos={reviewPhotos}
              onPhotoClick={(photos, index) => onOpenPhotos(photos as any, index)}
              maxDisplay={isMobile ? 3 : 4}
              className="grid-cols-2 md:grid-cols-3"
            />
            {item.content.photos[0]?.caption && (
              <p className="text-sm text-muted-foreground mt-2">
                {item.content.photos[0].caption}
              </p>
            )}
          </div>
        );
      })()}
    </div>
  );
});

ReviewDisplay.displayName = 'ReviewDisplay';