import { memo } from 'react';
import { SubmissionItemsList } from '../SubmissionItemsList';
import { getSubmissionTypeLabel } from '@/lib/moderation/entities';
import type { ModerationItem } from '@/types/moderation';

interface EntitySubmissionDisplayProps {
  item: ModerationItem;
  isMobile: boolean;
}

export const EntitySubmissionDisplay = memo(({ item, isMobile }: EntitySubmissionDisplayProps) => {
  return (
    <>
      {/* Main content area */}
      <div>
        <SubmissionItemsList 
          submissionId={item.id}
          view="detailed"
          showImages={true}
        />
      </div>
      
      {/* Middle column for wide screens - shows extended submission details */}
      {!isMobile && item.type === 'content_submission' && (
        <div className="hidden 2xl:block space-y-3">
          <div className="bg-card rounded-md border p-3">
            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2">
              Review Summary
            </div>
            <div className="text-sm space-y-2">
              <div>
                <span className="text-muted-foreground">Type:</span>{' '}
                <span className="font-medium">{getSubmissionTypeLabel(item.submission_type || 'unknown')}</span>
              </div>
              {item.submission_items && item.submission_items.length > 0 && (
                <div>
                  <span className="text-muted-foreground">Items:</span>{' '}
                  <span className="font-medium">{item.submission_items.length}</span>
                </div>
              )}
              {item.status === 'partially_approved' && (
                <div>
                  <span className="text-muted-foreground">Status:</span>{' '}
                  <span className="font-medium text-yellow-600 dark:text-yellow-400">
                    Partially Approved
                  </span>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </>
  );
});

EntitySubmissionDisplay.displayName = 'EntitySubmissionDisplay';