import type { Meta, StoryObj } from '@storybook/react';
import GalleryComponent from '.';

import galleryImg1 from '@/assets/img/gallery/gallery-1.jpg';
import galleryImg2 from '@/assets/img/gallery/gallery-2.jpg';
import galleryImg3 from '@/assets/img/gallery/gallery-3.jpg';
import galleryImg4 from '@/assets/img/gallery/gallery-4.jpg';
import galleryImg5 from '@/assets/img/gallery/gallery-5.jpg';
import galleryImg6 from '@/assets/img/gallery/gallery-6.jpg';

const meta: Meta<typeof GalleryComponent> = {
  title: 'TopLevel/Gallery',
  component: GalleryComponent,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen'
  }
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Gallery: Story = {
  args: {
    title: 'What’s on Your Mind?',
    subtitle: 'Let’s Find It!',
    description: `What you're looking for, right here! From premium spaces to top-notch perks, seamless convenience, and a vibrant community—designed to elevate your experience and keep you inspired every day.`,
    gallery: [
      {
        image: {
          url: galleryImg1.src,
          width: galleryImg1.width,
          height: galleryImg1.height,
          alt: 'Image-1'
        },
        title: 'Our Offerings'
      },
      {
        image: {
          url: galleryImg2.src,
          width: galleryImg2.width,
          height: galleryImg2.height,
          alt: 'image-2'
        },
        title: 'Discover our community'
      },
      {
        image: {
          url: galleryImg3.src,
          width: galleryImg3.width,
          height: galleryImg3.height,
          alt: 'Image-3'
        },
        title: 'Cultivate Connections'
      },
      {
        image: {
          url: galleryImg4.src,
          width: galleryImg4.width,
          height: galleryImg4.height,
          alt: 'Image-4'
        },
        title: 'Attend Events'
      },
      {
        image: {
          url: galleryImg5.src,
          width: galleryImg5.width,
          height: galleryImg5.height,
          alt: 'Image-5'
        },
        title: 'Grow Together'
      },
      {
        image: {
          url: galleryImg6.src,
          width: galleryImg6.width,
          height: galleryImg6.height,
          alt: 'Image-6'
        },
        title: 'Explore'
      }
    ]
  }
};
