import { memo } from 'react';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
import type { ModerationItem } from '@/types/moderation';

interface QueueItemContextProps {
  item: ModerationItem;
}

export const QueueItemContext = memo(({ item }: QueueItemContextProps) => {
  if (!item.entity_name && !item.park_name && !item.user_profile) {
    return null;
  }

  return (
    <div className="space-y-3">
      {(item.entity_name || item.park_name) && (
        <div className="bg-card rounded-md border p-3 space-y-2">
          <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Context
          </div>
          {item.entity_name && (
            <div className="text-sm">
              <span className="text-xs text-muted-foreground block mb-0.5">
                {item.park_name ? 'Ride' : 'Entity'}
              </span>
              <span className="font-medium">{item.entity_name}</span>
            </div>
          )}
          {item.park_name && (
            <div className="text-sm">
              <span className="text-xs text-muted-foreground block mb-0.5">Park</span>
              <span className="font-medium">{item.park_name}</span>
            </div>
          )}
        </div>
      )}
      
      {item.user_profile && (
        <div className="bg-card rounded-md border p-3 space-y-2">
          <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
            Submitter
          </div>
          <div className="flex items-center gap-2">
            <Avatar className="h-8 w-8">
              <AvatarImage src={item.user_profile.avatar_url ?? undefined} />
              <AvatarFallback className="text-xs">
                {(item.user_profile.display_name || item.user_profile.username)?.slice(0, 2).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div className="text-sm">
              <div className="font-medium">
                {item.user_profile.display_name || item.user_profile.username}
              </div>
              {item.user_profile.display_name && (
                <div className="text-xs text-muted-foreground">
                  @{item.user_profile.username}
                </div>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  );
});

QueueItemContext.displayName = 'QueueItemContext';