frontend/src/components/VideoGallery.tsx

import React from 'react'
import type { ExamplesData } from './Examples'

interface GalleryProps {
  selectedModel: string
  selectedAttack: string
  examples: {
    [model: string]: {
      [attack: string]: ExamplesData[]
    }
  }
}

const VideoGallery: React.FC<GalleryProps> = ({ selectedModel, selectedAttack, examples }) => {
  const exampleItems = examples[selectedModel][selectedAttack]
  return (
    <div className="example-display">
      {exampleItems.map((item, index) => (
        <div key={index} className="example-item">
          <p>{item.name}</p>
          <video controls src={item.video_url} className="example-video" />
        </div>
      ))}
    </div>
  )
}

export default VideoGallery