import type { Meta, StoryObj } from '@storybook/react';
import { ImageGallery } from './ImageGallery';
import type { GalleryImage } from './ImageGallery';
import Box from '@mui/material/Box';

const venueImages: GalleryImage[] = [
  {
    src: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&h=600&fit=crop',
    alt: 'Chapel interior with natural light',
  },
  {
    src: 'https://images.unsplash.com/photo-1464366400600-7168b8af9bc3?w=800&h=600&fit=crop',
    alt: 'Chapel exterior and gardens',
  },
  {
    src: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?w=800&h=600&fit=crop',
    alt: 'Reception hall',
  },
  {
    src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=800&h=600&fit=crop',
    alt: 'Lakeside view',
  },
  {
    src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=600&fit=crop',
    alt: 'Mountain chapel',
  },
];

const meta: Meta<typeof ImageGallery> = {
  title: 'Molecules/ImageGallery',
  component: ImageGallery,
  tags: ['autodocs'],
  parameters: {
    layout: 'padded',
  },
  decorators: [
    (Story) => (
      <Box sx={{ maxWidth: 640 }}>
        <Story />
      </Box>
    ),
  ],
};

export default meta;
type Story = StoryObj<typeof ImageGallery>;

/** Default — multiple images with thumbnail strip */
export const Default: Story = {
  args: {
    images: venueImages,
  },
};

/** Single image — no thumbnail strip shown */
export const SingleImage: Story = {
  args: {
    images: [venueImages[0]],
  },
};

/** Two images */
export const TwoImages: Story = {
  args: {
    images: venueImages.slice(0, 2),
  },
};

/** Custom hero height and thumbnail size */
export const CustomSizes: Story = {
  args: {
    images: venueImages,
    heroHeight: 300,
    thumbnailHeight: 48,
  },
};
