import {
  Meta,
  Canvas,
  ArgsTable,
  Story,
  SourceState,
} from "@storybook/blocks";
import { ComponentHeading } from "../../storybook-components";
import { THEME } from "../../types";
import { ConveyorLogo } from "./ConveyorLogo";
import { tokens } from "../../style-dictionary/dist/tokens";

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

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

## Installation

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

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

## Basic usage

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

## API

<ArgsTable of={ConveyorLogo} />

## Demos

### Wordmark variant

#### On light background (light theme)

This is the default configuration.

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

#### On dark background (dark theme)

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

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

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

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

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

### Icon-only variant

#### On light background (light theme)

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

#### On dark background (dark theme)

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

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

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

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

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

#### Custom color on light background, monochromatic (light theme)

<Canvas withSource={SourceState.OPEN}>
  <Story name="Custom color logo icon light theme monochrome">
    <Container theme="light">
      <ConveyorLogo
        variant="icon"
        theme={THEME.PRODUCT}
        monochrome
        color={tokens.color.blue["400"]}
      />
    </Container>
  </Story>
</Canvas>

#### Custom color on dark background, monochromatic (dark theme)

<Canvas withSource={SourceState.OPEN}>
  <Story name="Custom color logo icon dark theme monochrome">
    <Container theme="dark">
      <ConveyorLogo
        variant="icon"
        theme={THEME.BRAND}
        monochrome
        color={tokens.color.blue["400"]}
      />
    </Container>
  </Story>
</Canvas>