import { Meta, Canvas } from '@storybook/blocks';

import * as PhotoCarouselStories from './PhotoCarousel.stories.svelte';

<Meta of={PhotoCarouselStories} />

# PhotoCarousel

The `PhotoCarousel` component creates a simple, accessible photo carousel with lazy-loading and mobile swipe built in.

```svelte
<script>
  import { PhotoCarousel } from '@reuters-graphics/graphics-components';

  const photos = [
    {
      src: 'https://.../myImage.jpg',
      altText: 'A picture of...',
      caption: 'My caption...', // Optional
      credit: 'REUTERS/Jane Doe', // Optional
      objectFit: 'contain', // Optional
      objectPosition: '50% 50%', // Optional
    },
    // ...
  ];
</script>

<PhotoCarousel {photos} />
```

<Canvas of={PhotoCarouselStories.Demo} />

## Custom text

Use named slots to style your own custom credits and/or captions.

```svelte
<PhotoCarousel {photos}>
  <p slot="credit" class="custom-credit" let:credit>{credit}</p>
  <p slot="caption" class="custom-caption" let:caption>{caption}</p>
</PhotoCarousel>

<style lang="scss">
  p {
    position: absolute;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: sans-serif;
    font-size: 0.8rem;
    padding: 0 5px;
    &.custom-credit {
      top: 0;
      right: 0;
    }
    &.custom-caption {
      bottom: 5px;
      left: 0;
    }
  }
</style>
```

<Canvas of={PhotoCarouselStories.CustomText} />