import ImageGallery from './ImageGallery.vue';

export default { title: 'Molecules/ImageGallery', component: ImageGallery };
export const ContainedMuseumStage = {
  args: {
    images: [
      { id: 'front', label: 'FRONT', alt: 'Front of Charizard ex' },
      { id: 'back', label: 'BACK', alt: 'Back of Charizard ex' },
    ],
  },
};

export const WithPublicImageUrls = {
  args: {
    images: [
      { id: 'front', src: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="640" height="480"%3E%3Crect width="100%" height="100%" fill="%23d9e2ef"/%3E%3Ctext x="50%" y="50%" text-anchor="middle" fill="%231761ff" font-size="42"%3EFRONT%3C/text%3E%3C/svg%3E', alt: 'Front of Charizard ex' },
      { id: 'back', label: 'BACK', alt: 'Back of Charizard ex' },
    ],
  },
};

export const BrokenImageFallback = {
  args: {
    images: [{ id: 'broken', src: '/fixtures/missing-image.webp', alt: 'Unavailable collectible image' }],
  },
};