import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as ImageStories from './Image.stories';

<Meta title="Content/Images" />

# Images <small class="bootstrap-docs">[Bootstrap Images](https://getbootstrap.com/docs/5.3/content/images/)</small>

The `<Image>` component is designed to be flexible and adaptive, supporting fluid layouts and providing options for thumbnail displays.

<Canvas>
  <Story of={ImageStories.Basic} />
</Canvas>

<Controls of={ImageStories.Basic} />

## Fluid

<Canvas withSource="none">
  <Story of={ImageStories.Fluid} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Image } from '@sveltestrap/sveltestrap';
</script>

<Image fluid alt="This is a fluid Image" src="https://picsum.photos/id/518/1500/667.jpg" />
`} />

## Thumbnail

<Canvas withSource="none">
  <Story of={ImageStories.Thumbnail} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Image } from '@sveltestrap/sveltestrap';
</script>

<Image thumbnail alt="This is a thumbnail Image" src="https://picsum.photos/100/100?random=1" />
`} />

## Figure

<Canvas withSource="none">
  <Story of={ImageStories.Figures} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Figure, Image } from '@sveltestrap/sveltestrap';
</script>

<Figure caption="I believe this is a cow needing a haircut">
  <Image fluid alt="Landscape" src="https://picsum.photos/id/200/800/600" />
</Figure>
`} />

## Theming

<Canvas withSource="none">
  <Story of={ImageStories.Theming} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Image } from '@sveltestrap/sveltestrap';

  const thumbnails = [
    'https://picsum.photos/100/100?random=1',
    'https://picsum.photos/100/100?random=2',
    'https://picsum.photos/100/100?random=3'
  ];
</script>

<div class="horizontal">
  {#each thumbnails as thumbnail}
    <Image data-bs-theme="dark" thumbnail alt="This is a thumbnail Image" src={thumbnail} />
  {/each}
</div>

<div class="horizontal">
  {#each thumbnails as thumbnail}
    <Image data-bs-theme="light" thumbnail alt="This is a thumbnail Image" src={thumbnail} />
  {/each}
</div>
`} />