import { Meta, Canvas, Story, SourceState } from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { EmptyIllustration } from "./EmptyIllustration";
import { Grid } from "../Grid";

<Meta
  title="Components/Images/Empty Illustration"
  component={EmptyIllustration}
/>

<ComponentHeading
  componentName="EmptyIllustration"
  description="A component for displaying empty state illustrations"
  sourcePath="src/components/EmptyIllustration/EmptyIllustration.tsx"
  hideDemosLink
/>

## Installation

```jsx
import { EmptyIllustration } from "@conveyorhq/arrow-ds";
```

## Usage

```jsx
<EmptyIllustration id="alert" />
```

## API

```tsx
React.ComponentProps<typeof Svg> & {
  id: typeof [
    "alert",
    "books-check",
    "bulk-edit",
    "clock",
    "confetti",
    "docs",
    "done",
    "found",
    "lightning",
    "megaphone",
    "network",
    "network-nodes",
    "no-results",
    "open-questions",
    "patterns",
    "stopwatch",
    "tags",
    "team",
    "todo",
  ][number];
}
```

## Illustrations

<Canvas withSource={SourceState.OPEN}>
  <Story name="Illustrations">
    <Grid columns="repeat(3, 1fr)" gap="24px">
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="alert" />
        <code>alert</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="books-check" />
        <code>books-check</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="bulk-edit" />
        <code>bulk-edit</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="clock" />
        <code>clock</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="confetti" />
        <code>confetti</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="docs" />
        <code>docs</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="done" />
        <code>done</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="found" />
        <code>found</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="lightning" />
        <code>lightning</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="megaphone" />
        <code>megaphone</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="network" />
        <code>network</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="network-nodes" />
        <code>network-nodes</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="no-results" />
        <code>no-results</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="open-questions" />
        <code>open-questions</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="patterns" />
        <code>patterns</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="stopwatch" />
        <code>stopwatch</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="tags" />
        <code>tags</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="team" />
        <code>team</code>
      </Grid.Item>
      <Grid.Item className="text-center flex flex-col items-center justify-center gap-2">
        <EmptyIllustration id="todo" />
        <code>todo</code>
      </Grid.Item>
    </Grid>
  </Story>
</Canvas>