frontend/src/components/AudioGallery.tsx

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

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

const AudioGallery: 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>
          {item.audio_url && <AudioPlayer src={item.audio_url} />}
          <img src={item.image_url} alt={item.name} className="example-image" />
        </div>
      ))}
    </div>
  )
}

export default AudioGallery