import { useScreenshots } from '../../../contexts/ScreenshotContext';
import { EvidenceScreenshot } from './EvidenceScreenshot';

interface EvidenceGalleryProps {
  evidenceIds?: string[];
  compact?: boolean;
}

export function EvidenceGallery({ evidenceIds, compact }: EvidenceGalleryProps) {
  const { getByIds } = useScreenshots();

  if (!evidenceIds?.length) return null;

  const items = getByIds(evidenceIds);
  if (!items.length) return null;

  if (items.length === 1) {
    return (
      <div className="mt-3">
        <EvidenceScreenshot evidence={items[0]} compact={compact} />
      </div>
    );
  }

  return (
    <div className="mt-3 flex gap-3 overflow-x-auto pb-2" style={{ scrollbarWidth: 'thin' }}>
      {items.map((item) => (
        <div key={item.id} className="shrink-0 w-[200px]">
          <EvidenceScreenshot evidence={item} compact />
        </div>
      ))}
    </div>
  );
}
