import {
  Meta,
  Canvas,
  Story,
  SourceState,
  ArgsTable,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { Flex } from "../Flex";
import { Text } from "../Text";
import { Loading } from "./Loading";

<Meta title="Components/Feedback/Loading" component={Loading} />

export const ExampleContainer = ({ ...props }) => (
  <div className="h-64" {...props} />
);

<ComponentHeading
  componentName="Loading"
  description="Provides a loading animation"
  sourcePath="src/components/Loading/Loading.tsx"
/>

## Installation

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

## Basic usage

<Canvas withSource={SourceState.OPEN}>
  <Story name="Loading">
    <Loading />
  </Story>
</Canvas>

## API

Inherits props of [ConveyorLogo](/docs/components-logos-conveyor-logo--logo).

<ArgsTable of={Loading} />

## Demos

### Centering the loader

This example shows how you can center the loader in both directions within a
larger container using flexbox.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Loading centering demo with flexbox">
    <ExampleContainer>
      <Flex className="w-full h-full items-center justify-center">
        <Loading />
      </Flex>
    </ExampleContainer>
  </Story>
</Canvas>

If you don’t need to center the loading component vertically, you can use margin
to center it horizontally.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Loading centering demo">
    <ExampleContainer>
      <Loading className="mx-auto" />
    </ExampleContainer>
  </Story>
</Canvas>

### Loading with text

This example shows how you can add text above the loader while centering both.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Loading with text">
    <ExampleContainer>
      <Flex className="w-full h-full items-center justify-center flex-col">
        <Text className="text-h3 font-medium mb-4">
          Creating 8 SaaS Systems…
        </Text>
        <Loading />
      </Flex>
    </ExampleContainer>
  </Story>
</Canvas>

### On a dark background

This example shows how you can change the color of the loader when using on a
dark background.

<Canvas withSource={SourceState.OPEN}>
  <Story name="Loading on a dark background">
    <ExampleContainer>
      <Flex className="w-full h-full items-center justify-center flex-col bg-gray-900">
        <Loading className="text-brandGreen-400" />
      </Flex>
    </ExampleContainer>
  </Story>
</Canvas>