import { Meta, StoryObj } from '@storybook/nextjs-vite'
import { Gallery, GalleryItem } from './Gallery'
import chris from "./../../assets/christophorus.jpeg"
import forest from "./../../assets/forest.jpeg"
import map from "./../../assets/map.jpg"

const meta: Meta<typeof Gallery> = {
  component: Gallery,
}

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

// Remote image with explicit dimensions (varied aspect ratios) so the strip
// shows genuinely different items. Picsum serves a stable image per `id`.
const remote = (
  id: string,
  picId: number,
  width: number,
  height: number,
  alt: string,
  caption?: string,
): GalleryItem => ({
  id,
  thumbnail: { src: `https://picsum.photos/id/${picId}/${width}/${height}`, width, height },
  image: { src: `https://picsum.photos/id/${picId}/${width * 2}/${height * 2}`, width: width * 2, height: height * 2 },
  alt,
  caption,
})

export const Default: Story = {
  args: {
    items: [
      { id: "1", thumbnail: chris, image: chris, alt: "Heiliger Christophorus" },
      remote("2", 1015, 600, 400, "Fluss im Tal"),
      { id: "3", thumbnail: forest, image: forest, alt: "Wald" },
      remote("4", 1018, 500, 500, "Berglandschaft"),
      { id: "5", thumbnail: map, image: map, alt: "Karte der Pfarrei" },
      remote("6", 1039, 700, 400, "Wasserfall"),
      remote("7", 164, 400, 600, "Stillleben"),
    ],
  },
}

export const WithCaptions: Story = {
  args: {
    items: [
      { id: "1", thumbnail: chris, image: chris, alt: "Heiliger Christophorus", caption: "Fenster des Heiligen Christophorus, Hauptschiff" },
      { id: "2", thumbnail: forest, image: forest, alt: "Wald", caption: "Spaziergang durch den Pfarrwald" },
      remote("3", 1043, 600, 400, "Innenraum", "Blick auf die Orgelempore"),
      { id: "4", thumbnail: map, image: map, alt: "Karte", caption: "Lage der Gemeinde" },
    ],
  },
}

export const SingleItem: Story = {
  args: {
    items: [
      { id: "1", thumbnail: chris, image: chris, alt: "Heiliger Christophorus", caption: "Einzelnes Bild ohne Autoscroll" },
    ],
  },
}
