import {
  Meta,
  Preview,
  Props,
  Story,
  SourceState,
} from "@storybook/addon-docs/blocks";
import { ComponentHeading } from "../../storybook-components";
import { THEME } from "../../types";
import { ConveyorLogo } from "./ConveyorLogo";

<Meta title="Components/Logos/Conveyor Logo" component={ConveyorLogo} />

<ComponentHeading
  componentName="Conveyor Logo"
  description="Component description here"
  sourcePath="src/components/ConveyorLogo/ConveyorLogo.tsx"
/>

```jsx
import { ConveyorLogo } from "@aptible/arrow-ds";
```

export const Container = ({ children, theme }) => (
  <div
    className="p-8"
    style={{ backgroundColor: theme === "dark" ? "#132333" : "#fff" }}
  >
    {children}
  </div>
);

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo">
    <Container theme="light">
      <ConveyorLogo />
    </Container>
  </Story>
</Preview>

## Props

<Props of={ConveyorLogo} />

## Wordmark variant

### On light background (light theme)

This is the default configuration.

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo wordmark light theme">
    <Container theme="light">
      <ConveyorLogo theme={THEME.PRODUCT} />
    </Container>
  </Story>
</Preview>

### On dark background (dark theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo wordmark dark theme">
    <Container theme="dark">
      <ConveyorLogo theme={THEME.BRAND} />
    </Container>
  </Story>
</Preview>

### On light background, monochromatic (light theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo wordmark light theme monochrome">
    <Container theme="light">
      <ConveyorLogo theme={THEME.PRODUCT} monochrome />
    </Container>
  </Story>
</Preview>

### On dark background, monochromatic (dark theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo wordmark dark theme monochrome">
    <Container theme="dark">
      <ConveyorLogo theme={THEME.BRAND} monochrome />
    </Container>
  </Story>
</Preview>

## Icon-only variant

### On light background (light theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo icon light theme">
    <Container theme="light">
      <ConveyorLogo variant="icon" theme={THEME.PRODUCT} />
    </Container>
  </Story>
</Preview>

### On dark background (dark theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo icon dark theme">
    <Container theme="dark">
      <ConveyorLogo variant="icon" theme={THEME.BRAND} />
    </Container>
  </Story>
</Preview>

### On light background, monochromatic (light theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo icon light theme monochrome">
    <Container theme="light">
      <ConveyorLogo variant="icon" theme={THEME.PRODUCT} monochrome />
    </Container>
  </Story>
</Preview>

### On dark background, monochromatic (dark theme)

<Preview withSource={SourceState.OPEN}>
  <Story name="Logo icon dark theme monochrome">
    <Container theme="dark">
      <ConveyorLogo variant="icon" theme={THEME.BRAND} monochrome />
    </Container>
  </Story>
</Preview>